[jQuery] Weird behavior of CSS float! Different in IE and Firefox
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!