<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! > >
