IE 7 floated div auto-clearing next element ?

Question

Hello, I'm having trouble with the following example.

Background: I first have a element floated to the right with an image output inside it. I then have a element with other content within it.

In FF and IE 8, as expected, the .images div floated to the right displays floated to the right pushing the content within the .product-body div to the left nicely.

The problem: But when viewed in IE 7 compatibility mode, the .product-body div is cleared underneath the .images div and thus the .images div does not fall nicely to the right as expected. IT does this regardless of whether or not i have clear:none; on the .broduct-body div.

Please see the example at www.hotelmarketingbudget.com Look at the source code there at the div element #content-body to see these divs. Feel free to use Firebug or IE Dev toolbar or whatnot to check this out.

The relevant CSS:

#content-body{
 width:auto;
 height:auto;
 position:relative;
 margin:0 auto; 
}

.product-group .images {
 float:right;
 width:auto;
 height:auto;
 position:relative;
 margin:0 auto;
 margin-left:15px;
}

.product-group .product-body {
 width:auto;
 height:auto;
 position:relative;
 margin:0 auto;
}

I've spent hours already trying to figure out how to fix this- googling, reading other threads here on stackoverflow, but alas i cannot find any solutions and it's hard to know what words to even search with. I'm really hoping this is just some brain-fart on my part.

Any advice or ideas or questions would be GREATLY appreciated!

Answer 1

Try assigning a fixed width to the content that you are floating (as in width:250px). I find older versions of IE don't handle floats very well unless they have a fixed width.

I suspect this is probably a hasLayout issue, so if you're curious on why this bug exists, this is a really good read:

http://www.satzansatz.de/cssd/onhavinglayout.html

If you don't want to assign a fixed width, some other hasLayout hacks you can try are min-width: 1% and zoom: 1.