IE 7/8 rendering Iinline (Floated Divs) as block: widths do not adjust to content?

Question

I have a block element (DIV) who stretches across an entire page. It contains multiple floated DIVs of variable width. This element can live on many web pages (anyone can put it on their website). In FF on all sites it is rendered correctly and the floated DIVs are only as wide as their inner contents. In IE, it works sometimes- but on other sites it does not, and instead it stretches each floated DIV to the width of it's parent, which it should not be. Attached is an image to further exemplify (red DIV is container, black DIVs are floated).

http://img8.imageshack.us/img8/4734/screenrrl.jpg (Image is Photoshopped, not an actual HTML render)

Answer 1

Found it! The issue is that I was using a single DIV to clear all elements inside the parent. Certain rendering modes in IE have a problem with this. Instead I replaced it by adding a clearfix class to the parent!

Answer 2

you can use this clearfix for ul (I suppose it is used on the screenshot):

#list { overflow: hidden; zoom: 1; }

instead of "clear: both;".