homepage Welcome to WebmasterWorld Guest from 54.227.56.174
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderator: open

CSS Forum

    
Gap between floating div and clearing div
IE 6 and Opera 7.5 - Can it be a bug?
PeterD




msg:1180411
 5:33 am on May 20, 2004 (gmt 0)

Dear CSS mavens! I'm having trouble with an inexplicable gap between the bottom of a floating div and the top of a clearing div just below it. Here's the relevant CSS:


div#lft {
float: left;
width: 100px;
border: 1px solid green;
}
div#content {
margin-left: 100px;
}
div#foot {
clear: both;
border: 1px solid black;
}

And the HTML:


<div id="lft">
<p>This is the left div. It's set to float left with a width of 100px. I have to add this filler text to make the div on the left longer than the content div.</p>
</div>
<div id="content">
<p>This is the content div.</p>
<p>This is a second paragraph in the content div.</p>
</div>
<div id="foot">
<p>This is the footer div. The gap above this div is the problem.</p>
</div>

The problem is, you'll see a 20px gap between the bottom of the floaring left div and the top of the footer div. (The borders are there to make this more clear.) I can't see why it should be there. After messing around, I found two different ways to make the gap go away: first, adding a border to the content div. Second, setting the margin-bottom of the last paragraph in the content div to zero.

Neither of which make any sense to me. I went back to the W3C definitions for float and clear, and I still don't get it!

It seems like a bug to me, yet I see the gap in both Opera 7.5 Win and IE6 Win, and both fixes make it go away in both browsers.

Is this a known bug, or am I misunderstanding the specs? Thanks for your thoughts!
Pete

 

SuzyUK




msg:1180412
 2:55 pm on May 20, 2004 (gmt 0)

Hi PeterD.. it's not a bug.. it's a feature.. hmmm

Collapsing Margins [w3.org]

the expression collapsing margins means that adjoining margins (no padding or border areas separate them) of two or more boxes (which may be next to one another or nested) combine to form a single margin.

My bold.. "Combining Margins" might have been a better term :) When two margins "combine", the larger one wins the day!

In simple terms..
Moz is "combining" the <p> margin with it's parent (#content ) div's bottom margin, the <p> margin is larger and is "winning" then Moz is rendering the larger margin inside the parent.. (see inside your left div for proof of this)

IE/Opera is actually doing this too, but the crossbrowser difference comes from where the different browsers apply the combined margin. they are putting it outside the (cleared) #content div, so causing the gap between it and the footer.

The footer is immune because it has a top border on it.

Both your methods of "fixing" this, (avoiding the occurence, is more like it) are correct.

Personally, I set all internal elements that have default margins.. e.g. <hx>, <p>, <form> to O in the master CSS file and set any required spacing with padding.

Because the different Browsers deal with collapsing margins differently, it's more obvious in Moz, because of the gaps, in IE/Opera it's more likely to show itself when you can't apply a top/bottom margin to something..(like in the left div) IE/opera also have another big difference, becuase they render the margin on the parent, it then seems to go on collapsing if there are any more ascendants above.... yeuch..

It's because of these difference I find it easier just to use the solution that avoids it in all browsers. Until I understand this fully anyways ;)

Solution in this instance...
p {margin: 0; padding: 10px 0;}
or the border on the content div is another recommended one.. (top and/or bottom one will do)

Will explain more if I ever figure it out properly :)

Suzy

PeterD




msg:1180413
 4:09 pm on May 20, 2004 (gmt 0)

Thank you so much. I thought it had something to do with "inside" collapsing, because the two methods I had stumbled on to get rid of it prevent collapsing. I could understand IE and Opera's logic if the content div was longer than the left div. The margin from the <p> would push the footer down. But here the left div is actually longer than the content div, and the extra space from the <p> in the content div (which should be completely cleared) is getting added to the bottom of the left div!

It's almost as if they implemented the clear by extending the bottom margin of #content instead of increasing the top margin of #foot, the way the specs say browsers should do it. I'm not surprised to see IE doing this, but I'm a bit disappointed in Opera. I wonder why they decided to do it this way?

Anyway, thanks for the advice of setting all the defaults, then trying to use padding in favor of margins. That definitely sounds like the way to go.

Thanks again for puzzling this out.

SuzyUK




msg:1180414
 5:07 pm on May 20, 2004 (gmt 0)

You're Welcome..

It's almost as if they implemented the clear by extending the bottom margin of #content instead of increasing the top margin of #foot, the way the specs say browsers should do it. I'm not surprised to see IE doing this, but I'm a bit disappointed in Opera. I wonder why they decided to do it this way?

What you're seeing may well be something to do with the float and clearance. I actually think (at this point anyway!) that IE/Opera are increasing the top margin of #foot, but that it's more to do with a collapsed/escaped margin on the floated div (which according the guidelines, shouldn't be there?).. and I thought I'd finally got the collapsing sussed lol..

But though I've now realised there is more than one thing going on here...my "catchall" (padding) solution is avoiding this too, so it's OK for now. (That's proably the reason I never really looked into before.. I wasn't seeing it properly :))

I certainly wouldn't be surprised if it's an IE bug, but at this stage I still don't think it is (because of Opera too probably!). I just think Opera and IE have chosen to interpret the collapsing margin rec differently than Moz..
(btw the CSS 2.1 rec on Collapsing Margins [w3.org] is a bit clearer..)

Whoever is "right" from that first set of guidelines I don't know ;) but I do think that this in turn is having a knock-on effect when mixed with the clearance/clear property guidelines.

<thinking aloud>
..maybe that's why 2.1 is clearer to try and bring this into some perspective..
<end thought>

still looking :)..

Suzy

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved