Just as a follow up on this, it doesn't have to be overflow hidden, just any overflow attribute. Applying the overflow forces the browser to calculate the size of the div to see if it needs to show the scrollbar or not.
Giuliano Marcangelo wrote: > > <div id="parent" style="width:800px;background- > color:rgb(200,200,0);padding:5px;border:2px solid;overflow:hidden"> > > On 30/08/2007, Paladin <[EMAIL PROTECTED]> wrote: >> >> >> I just discovered some weird behavior of float. The following is the >> html code. >> >> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/ >> TR/html4/strict.dtd"> >> <html> >> <head> >> <meta http-equiv="Content-Type" content="text/html; >> charset=iso-8859-1" /> >> <title>Untitled Document</title> >> </head> >> <body> >> <div id="parent" style="width:800px;background- >> color:rgb(200,200,0);padding:5px;border:2px solid;"> >> <div id="child1" >> style="position:relative;float:left;border:1px >> solid;width:200px;height:40px;">This is child1</div> >> <div id="child2" >> style="position:relative;float:left;border:1px >> solid;width:200px;height:40px;">This is child2</div> >> </div> >> </body> >> </html> >> >> if rendered in FF, you will see that the children are out of the >> parent border. In IE, the page is correctly rendered. >> However, if we change the positioning of parent to position to >> absolute, you will see the childeren are correctly rendered inside the >> parent. >> Could someone do me some help? I just want to dynamically change the >> height of parent to contain the children divs, meanwhile every div >> maintain their position in the document flow. I happened to succeeded >> once but now even I repeat the code they don't seem to work. Very >> funny! >> >> > > -- View this message in context: http://www.nabble.com/Weird-behavior-of-CSS-float%21-Different-in-IE-and-Firefox-tf4353488s15494.html#a12414829 Sent from the JQuery mailing list archive at Nabble.com.
