title: Dynamically Size Div
body: <p>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.</p>
  
  <p>Here's my example:
  <a href="http://i.imgur.com/9vi2EK9.png" rel="nofollow">http://i.imgur.com/9vi2EK9.png</a></p>
  
  <p>And my CSS for each of the divs:</p>
  
  <pre><code>#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%; 
  }
  </code></pre>
  
  <p>How can I ensure that my divs resize based on the content in my other divs?</p>
  
  <p>Thanks!</p>