title: div container with variable height iframe and div box not expanding properly
body: <p>I am making a basic template for a website. It has div containers of 1 header, a main menu listed horizontally below the header, the main content which is a google maps iframe (variable width) and a sidebar (absolute width, floated right) and a footer.</p>
  
  <p>I am having some trouble with the height of the main content. I would like the iframe and the sidebar to have equal height whilst fitting to the page and leaving a margin for the footer but the main content always sets itself to min-height rather than stretching to the page.</p>
  
  <p><b>HTML</b></p>
  
  <pre><code>&lt;body&gt;
     &lt;div id="wrapper"&gt;
        &lt;div id="header"&gt;&lt;img src="images/logo.png" width="360" height="127" /&gt; &lt;/div&gt;&lt;!--header--&gt;
  
        &lt;div id="menu"&gt;
           &lt;ul&gt;&lt;li&gt;&lt;a href="index.html"&gt;Home&lt;/a&gt;&lt;/li&gt;
           &lt;li&gt;&lt;a href="about.html"&gt;About&lt;/a&gt;&lt;/li&gt;
           &lt;li&gt;&lt;a href="network.html"&gt;Network&lt;/a&gt;&lt;/li&gt;
           &lt;li&gt;&lt;a href="help.html"&gt;Help&lt;/a&gt;&lt;/li&gt;
           &lt;li&gt;&lt;a href="contact.html"&gt;Contact&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;
        &lt;/div&gt;&lt;!--mrnu--&gt;
  
        &lt;div id="content"&gt;
           &lt;div id="sidebar"&gt;
           Sidebar
           &lt;/div&gt;&lt;!--sidebar--&gt;
  
        &lt;div id="main"&gt;
           &lt;iframe id="map" width="100%" height="auto" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.co.uk/maps?q=52.988337,3.120117&amp;amp;num=1&amp;amp;ie=UTF8&amp;amp;t=m&amp;amp;z=6&amp;amp;ll=51.206883,7.756348&amp;amp;output=embed"&gt;&lt;/iframe&gt;
        &lt;/div&gt;&lt;!--main--&gt;
  
        &lt;div class="clear"&gt;&lt;/div&gt;
        &lt;/div&gt;&lt;!--content--&gt;
  
        &lt;div class="push"&gt;&lt;/div&gt;&lt;!--push--&gt;
  
        &lt;div id="footer" class="footer"&gt;
        &lt;/div&gt;&lt;!--footer--&gt;
     &lt;/div&gt;&lt;!--wrapper--&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><b>CSS</b></p>
  
  <pre><code>body {
      font-family: 'Trebuchet MS', Verdana, Helvetica, Arial, sans-serif;
      font-size: 75.00%; 
      color: #fff;
      background: url(images/bg.png);
  }
  a{
      color: #090; 
      text-decoration:none; 
  }
  a:focus, a:hover, a:active { 
      color: #FFF;
      text-decoration: underline;
  }
  .clearfix:after {
      content: ".";
      display: block;
      height: 0;
      clear: both;
      visibility: hidden
  }
  * {
     margin: 0;
  }
  html, body {
     height: 100%;
  }
  /* div tags */
  
  #wrapper    {
     width: auto;
     min-height: 100%;
     height: auto !important;
     height: 100%;
     margin: 0 auto -100px;
  }
  #header { 
     position: relative;
     width: auto; 
     height: auto; 
     background-color: #090; 
  }
  
  #menu { 
     width: auto; 
     height: auto; 
     border: 2px solid #000; 
     font-size: 18px; 
  }
  
  #menu ul { 
     padding: 0px; 
     margin: 0px; 
     text-align: center; 
  }
  
  #menu li { 
     display: inline; 
     padding: 50px; 
  }
  
  #content    {
     width: auto;
     height: 100%;
  }
  
  #main   {
     width: auto;
     margin-right: 125px;
  }
  #map    {
     width: 100%;
     height: auto;
  }
  
  #sidebar    {
     width: 125px;
     height: auto;
     float: right;
     text-align: center;
     background-color: #FC0;
  }
  
  #footer {
     width: auto;
     height: 125px;
     background-color:#CC0;
  
  }
  /* classes */
  
  .clear  {
     clear: both;
  }
  
  .footer .push   {
     height:125px;
  }
  </code></pre>
  
  <p><b>Note:</b> There may be 1 or 2 unused lines of code that I haven't spotted when I've been playing around with it so if anything seems out of place then it probably is.</p>
  
  <p>I have seen solutions to this problem with fixed width containers, but I think the problem lies in my use of the float function. I have read that positioning needs to be absolute for this to work properly, however using float is the only way I have been able to find that allows the map to fill the space using variable width.</p>
  
  <p>It could be something as simple as being incompatible with the browsers I am testing on but I'm not sure.</p>
  
  <p>Thanks in advance and sorry if this post is a bit messy. I'm sure I will learn to keep clean soon enough ;D</p>