Dynamically Size Div

Dynamically Size Div

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!