9 replies [Last post]
littlegiant
Offline
newbie
Last seen: 17 years 4 weeks ago
Timezone: GMT-5
Joined: 2005-11-08
Posts: 4
Points: 0

Greetings,

I'm messing around with a 3 col tableless layout (not the first time and I have plenty of CSS experience). I'm using a kind of mangled version of the piefecta-style 3 column layout and yesterday, just on a lark, I decided to make the negative margin on the left floated column greater than its width in order to see the effect of it not being able to push the footer down and to my surprise, it's still did push the footer down. I tested the layout in IE6, Firefox 1.0.7 and Opera 8.5 and they all work. You can see the layout at this URL:

http://www.ironspider.ca/test/

I don't think I'm fully grasping the concept of not being able to push the footer down if the negative margin on the floated divs is not less than their widths. According to my understanding, the above layout should not work.

Any comment would be appreciated.

Thanks.

(edit)

I'd just like to add that the test layout at the link I posted is valid HTML 4.01 Transitional and valid CSS.

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 4 years 4 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

3 col layout works? No 1 pixel overlap on floated left div

Hi

I'm not sure the piefecta layout was intended to be full width.

The content in the left column goes off the left edge of the page.

I think the extra 1 pixel was for older browsers. Did you check out the jello design at piefecta?

Trevor

littlegiant
Offline
newbie
Last seen: 17 years 4 weeks ago
Timezone: GMT-5
Joined: 2005-11-08
Posts: 4
Points: 0

3 col layout works? No 1 pixel overlap on floated left div

Greetings Trevor,

Thanks for the response. Re: full width... I didn't actually start out with piefacta layout but rather a layout that the designer said was based on the piefacta which he then made full width. I then took his layout and stripped away a lot of the hacks and reformatted the CSS so that I was more comfortable with it and renamed some of the IDs. The layout in the link above is what I ended up with.

I realize the content in the left column goes off the page and that's because the DIV is floated out an extra 10 pixels because, as I said, I'm experimenting with this 1 pixel overlap thing.

I thought about the older browser thing so I also tried it in IE5 and it still worked. Would you have any idea which older browsers this 1 pixel thing was supposed to be addressing?

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 4 years 4 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

3 col layout works? No 1 pixel overlap on floated left div

I DID know, but have long since forgotten.

Why not read it at Big John's site ( www.positioniseverything.net - home of piefecta)?

Trevor

littlegiant
Offline
newbie
Last seen: 17 years 4 weeks ago
Timezone: GMT-5
Joined: 2005-11-08
Posts: 4
Points: 0

3 col layout works? No 1 pixel overlap on floated left div

ClevaTreva wrote:
Why not read it at Big John's site ( www.positioniseverything.net - home of piefecta)?

Uh.. With all due respect, that's kind of vague. What would you have me do? Read the entire site?

Aside from zeroing in on this particular statement on the actual Piefecta layout:

This column is floated and also negatively margined to the left, so it is "pulled" out of its container except for a single pixel that is kept within the container.

...I'm not sure what else I could do. I thought it would be easier to submit my layout to a forum like this to get some feedback.

BTW... Are you the same ClevaTreva mentioned at the bottom of the Piefecta layout page?

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 4 years 4 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

3 col layout works? No 1 pixel overlap on floated left div

littlegiant wrote:
Uh.. With all due respect, that's kind of vague. What would you have me do? Read the entire site?

If you view the source, it shows loads of commenst/notes. But that isn't explained other than to say it's critical!!

Quote:
BTW... Are you the same ClevaTreva mentioned at the bottom of the Piefecta layout page?

Yes

Trevor

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 4 years 4 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

3 col layout works? No 1 pixel overlap on floated left div

Hi

Big John tells us that the 1 pixel thing was for older Gecko engined broswers:

Quote:
This is a somewhat simplified version of the Piefecta layout, which does not arrange for the negative side margined floats to "toe into" div.outer by 1px. This was previously necessary because of a clearing bug in Gecko browsers, but it caused IEwin to fail, and thus a number of fixes were then needed. Since Firefox 1 was released, that Gecko bug has been fixed so now the method is more intuitively structured, and almost all IE fixes have been eliminated.

This is from his new jello design.

I am working on a new version of the pagemaker tool. The one I have (v2.90) is (probably) the last based on the piefecta layout, as the next version will use the simplified jello ideas, plus the newer clearing floats method from Tony et al. This last version will be done within a few days. Just working on some bug fixes for Opera.

Trevor

littlegiant
Offline
newbie
Last seen: 17 years 4 weeks ago
Timezone: GMT-5
Joined: 2005-11-08
Posts: 4
Points: 0

3 col layout works? No 1 pixel overlap on floated left div

Yes thanks, Trevor. I just finished getting an email response from Big John who told me basically the same thing.

(edit)

To all:

For demonstrational purposes, I'll leave my layout example up at the link in the launch post of this thread for seven days after which I'll remove it.

Anonymous
Anonymous's picture
Guru

3 col layout works? No 1 pixel overlap on floated left div

ClevaTreva wrote:
Quote:
BTW... Are you the same ClevaTreva mentioned at the bottom of the Piefecta layout page?

Yes
I think "unsung script/css genius" sounds better than Guru. Wink

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 4 years 4 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

3 col layout works? No 1 pixel overlap on floated left div

Hi

Unsung sounds fine to me. If you'd heard my singing, that is. Tongue Tongue

Trevor