Forum Moderators: not2easy
In IE the ContainingDiv expands as the divs within it expand. (this is the behavior I expect)
In Safari the ContainingDiv does not expand. Instead, the divs within it expand beyond its borders.
The colored borders on the divs make the problem easy to see when the example is opened first in IE, then Safari.
I have Googled, tried every combination of height, overflow, etc. that I can imagine, but I can't get ContainingDiv to expand with its content in Safari.
Thanks for any help,
Blaz
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
html { height:100% }
body {min-height:101%;
margin:0;
padding:0;}
#ContainingDiv {border: solid red 5px;
width:677px; }
#LeftDiv {border: solid green 5px;
width:186px;
float:left;}
#RightDiv {border: solid blue 5px;
width:410px;
float:right;}
</style>
</head>
<body >
<div id="ContainingDiv">
<div id="LeftDiv">
<p>This text is in the LeftDiv</p>
<p>This text is in the LeftDiv</p>
<p>This text is in the LeftDiv</p>
</div>
<div id="RightDiv">
<p>This text is in the RightDiv</p>
<p>This text is in the RightDiv</p>
<p>This text is in the RightDiv</p>
<p>This text is in the RightDiv</p>
<p>This text is in the RightDiv</p>
</div>
</div>
</body>
</html>
and a warm welcome welcome to these forums. ;)
Try adding overflow:hidden to your #ContainingDiv rules.
birdbrain
What legacy versions of IE do is putting you on the wrong foot: they should not expand the outer div at all.
IE is wrong -as always-, best not to use it while designing as it'll continue to put you on the wrong foot all the time.
There are a number of ways to make a div expand to enclose it's floated content.
Using overflow:auto on the parent is one of them.
