ansaurus

Question

Answer 1

A:

I got it to resolve (IE7, FF) by adding:

<div style="clear:both;"></div>

BETWEEN the Floating div and the Footer.

[Edit:] When you float an element, and put an element after it that you want to start at the beginning of the next space, you should/must use a clearing element. Zack's right, too: If you're just stacking divs, you don't/shouldn't float anything.

John Dunagan 2009-04-19 15:09:39

Answer 2

+6 A:

In neither IE6 nor the standards browsers are the float's margins collapsing with its siblings. This is correct as per the quoted standard.

The difference in renderings is caused by IE6's interpretation of which margins flow together. (If you give each div a background colour it makes it easier to see what is happening here.)

Two or more adjoining vertical margins of block boxes in the normal flow collapse

With the normal flow defined thus:

Since a float is not in the flow, non-positioned block boxes created before and after the float box flow vertically as if the float didn't exist.

That is, they flow together and have adjoining vertical margins which may collapse. IE6 (and IE7 in Quirks Mode) gets this wrong, and thinks that the float breaks up the flow, causing no collapsing to occur.

With the general confusion surrounding vertical margins and collapsing, compounded by the still-extant browser bugs, I'd recommend avoiding vertical margins and using padding instead wherever possible.

bobince 2009-04-19 15:10:59

Thanks for your explanation, actually I suspected the same thing but wasn't sure. As to using padding instead of margins, actually this is what I do for the same reasons you mentioned.

Waleed Eissa 2009-04-19 15:30:03

ansaurus

tags:

views:

answers:

Margin collapsing with floated elements

related questions