Have Geek Brain

IE 7/8 rendering Iinline (Floated Divs) as block: width not adjusting to content?

I have a block element (DIV) that stretches across the entire page. It contains multiple floating DIVs with variable width. This element can live on many web pages (anyone can host it on their website). In FF on all sites, it renders correctly and floating DIVs only have a width than their inner content. In IE, this works sometimes, but on other sites it doesn't, and instead it stretches each floating DIV to the width of its parent, which it shouldn't. See attached image to demonstrate again (red DIV is container, black DIVs are floating).

http://img8.imageshack.us/img8/4734/screenrrl.jpg (Photoshopped image, not actual HTML rendering)

0


source to share


2 answers


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



+1


source


you can use this clearfix for the ul (i assume it is used in the screenshot):

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


instead of "clear: both;".

0


source






More articles:


All Articles