Menu
This seemingly simple problem has been tormenting me- I have tried everything from overflows to clears, to more complicated hacks, and nothing seems to work. Perhaps someone here knows how to deal with this- here’s the situation:
The webpage itself has 2 columns (a main content area and a nav column
on the right). Within the main content area, I have a container div,
which itself has 2 columns. The content within the 2 columns is
dynamic, and sometimes the rcol will be longer (height), and other times the
lcol will be longer.
No matter what I try to do, I cannot get the container div to “stretch”
to fit both columns. Sometimes it will work in IE (probably because
it’s not compliant), but not in FF. On a couple hack solutions, it will work in FF but not in IE. The longer of the two columns will
inevitably overflow beyond the container bottom border (or sometimes be cut off).
I cannot simply do a Clear Both, because that will clear it beyond the content of the right-hand nav column on the page.
Below is a simplified version of the problem, both the css and html. (I made the heights fixed, but in my real problem, the heights are dynamic and either column could be higher).
CSS:
#wrapper{
background-color: #336699;
height: 500px;
width: 700px;
margin: auto;
}
#nav{
float: right;
background-color: #CC6600;
height: 475px;
width: 200px;
}
#content{
margin-left: 20px;
float: left;
background-color: #CCCCCC;
width: 420px;
}
#column1{
margin-left: 4px;
float: left;
height: 300px;
border: 2px solid #000000;
width: 200px;
}
#column2{
margin-left: 4px;
float: left;
height: 200px;
border: 2px solid #334455;
width: 200px;
}
HTML:
<div id=”wrapper”>
<!– start nav –>
<div id=”nav”>
</div>
<!– end nav –>
<!– start content –>
<div id=”content”>
<!– start column1 –>
<div id=”column1″>
</div>
<!– end column1 –>
<!– start column2 –>
<div id=”column2″>
</div>
<!– end column2 –>
</div>
<!– end content –>
</div>