I haven't done web design in a long time and I just started working on this website... well anyways this is my problem.
I have a div tag for the content of the site then three sections like so;
<div id="main">
<div id="menu">
</div>
<div id="content">
</div>
<div id="sidebar">
</div>
</div>
Code:
#main {
width: 922px;
background: #8dac83;
margin: 0 auto;
}
/* Menu */
#menu {
float: left;
width: 202px;
}
/* Sidebar */
#sidebar {
float: left;
width: 160px;
}
/* Content */
#content {
float: left;
width: 558px;
background: #FFFFFF;
So its just three sections in one main div tag, my question is how can I make the main div stretch automatically to fit the size of my biggest column whichever it happens to be? I know IE automatically resizes my "main" div to whatever the biggest one inside is, but on Firefox I don't seem to be able to accomplish it

! Am I going to have to assign it a certain amount of pixels for height or can I stretch it without having anything else besides the nested divs??