Another floated DIV problem

Six divs in a container. They are all floated left. Three fit in a row then the next three appear below. In firefox this all works out fine but IE?
Date Created: 2nd October 2006
Date Modified: 2nd October 2006
Home > CSS > Float problem!

To solve query in WebmasterWorld CSS Forum:
http://www.webmasterworld.com/css/3105129.htm

So what happens is, in my IE anyway, the 3rd, 4th and 5th divs are lower than they should be - not sure why this is. Before I put the colours in I presumed this was the only problem. But also if you look the stuff div (the yellow one) is lower in IE and the top 3 product divs are outside of it.

So - it looks right in FF, but in IE the product divs go lower (as if there was a margin-top on them) and the stuff div goes lower as well.

Reason for 'problem' - the floated image is being taken out of the flow of the page and the containing DIV is therefore only accommodating the textual content (two paragraphs). To get around this we can simply add a 'clearing' DIV before the end of the containing DIV to expand the container to fit. OR... add overflow:hidden; width:100%; to the containing DIV.

Test Product

£100

Test Product

£100

Test Product

£100

Test Product

£1001

Test Product

£1001

Test Product

£1001

[Home]