Dynamically Size Div - css

Question

I'm doing some HTML and am running into an issue with my left and right column divs not scaling based on the content inside them as well as in proportion to the rest of the page.
Here's my example:
http://i.imgur.com/9vi2EK9.png
And my CSS for each of the divs:
#wrapper{
background:white;
width:1280px;
position:relative;
border: 1px solid black; /* black border */
margin:auto; /* centre this div */
}
#header{
height:90px;
text-align:center;
padding: .5em;
background-color: grey;
border-bottom: 2px solid black;
}
#leftmenu{
width:100px;
float:left;
font-size: 75%;
padding:.5em;
border-right:2px solid black;
border-left:2px solid black,
}
#rightmenu{
width:180px;
float:right;
font-size: 75%;
padding:.5em;
border-left:2px solid black;
border-right:1px solid black;
}
#content{
background-color:white;
margin-left:120px;
font-size: 80%;
}
#footer{
clear:both; /* push footer under other divs */
height: 70px;
background-color:white;
border-top:1px solid black;
border: 1px solid black;
padding-top:40px;
text-align:center;
font-size: 70%;
}
How can I ensure that my divs resize based on the content in my other divs?
Thanks!

Answer 1

Without seeing your HTML, here's a stab at it:
JSFiddle here: http://jsfiddle.net/2hf8q/
CSS
html, body {
height: 100%;
}
#wrapper {
height: calc(100% - 2px); /* for border */
}
#leftmenu, #rightmenu {
height: calc(100% - 234px); /* for header, footer */
}
#wrapper {
background:white;
width:100%;
position:relative;
border: 1px solid black;
/* black border */
margin:auto;
/* centre this div */
}
#header {
height:90px;
text-align:center;
padding: .5em;
background-color: grey;
border-bottom: 2px solid black;
}
#leftmenu {
width:100px;
float:left;
font-size: 75%;
padding:.5em;
border-right:2px solid black;
border-left:2px solid black;
}
#rightmenu {
width:180px;
float:right;
font-size: 75%;
padding:.5em;
border-left:2px solid black;
border-right:1px solid black;
}
#content {
background-color:white;
margin-left:120px;
font-size: 80%;
}
#footer {
clear:both;
/* push footer under other divs */
height: 70px;
background-color:white;
border-top:1px solid black;
border: 1px solid black;
padding-top:40px;
text-align:center;
font-size: 70%;
}
HTML
<div id="wrapper">
<div id="header"></div>
<div id="leftmenu"></div>
<div id="content"></div>
<div id="rightmenu"></div>
<div id="footer"></div>
</div>

Answer 2

You can do it by wrapping #leftmenu, #content and #rightmenu in a div that is displayed as a table. And display the three children as a table-cell:
HTML:
<div id="header">#header</div>
<div id="wrapper">
<div id="leftmenu">#leftmenu</div>
<div id="content">#content</div>
<div id="rightmenu">#rightmenu</div>
</div>
<div id="footer">#footer</div>
CSS (without colors, padding, font sizes and stuff):
html, body {
margin: 0;
padding: 0;
}
#header{
height:90px;
}
#wrapper {
display: table;
table-layout: fixed;
width: 100%;
}
#wrapper > div {
display: table-cell;
}
#leftmenu{
width:100px;
}
#rightmenu{
width:180px;
}
#content{
}
#footer{
height: 70px;
}
And a working demo.