Hi, i have this code on a test site:
<html>
<head>
<style type="text/css">
#main{
border:1px solid #000063;
border-width:1px;
background:#FFF;
width:400px;
margin: 0 auto;
height:auto;
overflow:auto;
}
#left{
background:#AAAAAA;
width:70%;
float:left;
}
#right{
background:#444444;
width:30%;
float:right;
color:#FFF;
}
</style>
</head>
<body>
<div id="main">
<div id="left">
#left div
<p>Loren Ipsum blah blah or something</p>
<p>Loren Ipsum blah blah or something</p>
<p>Loren Ipsum blah blah or something</p>
<p>Loren Ipsum blah blah or something</p>
<p>Loren Ipsum blah blah or something</p>
<p>Loren Ipsum blah blah or something</p>
<p>Loren Ipsum blah blah or something</p>
<p>Loren Ipsum blah blah or something</p>
</div>
<div id="right">
#right div<br>
I want this to grow to match #left's height
</div>
</div>
</body>
</html>
On Firefox, i had to set overflow:auto on the main div so it would
expand its height to
accomodate the other 2 divs. IE6 did this by default.
The problem is that i have a main div, with 2 divs inside it, one
floated to the left at 75% width, and one floated to the right at 25%
width.
When the content differs in both divs (meaning, div #left height's is
different than div #right height's), the height of the small one
doesn't expand to match the bigger's one height.
How can i do this? I think the code is self-explaining, if not then i
would gladly upload it somewhere.
