title: how to make the footer div start after all other divs have finished
body: <p><strong>UPDATE</strong>: look at the demo here: <a href="http://amit-verma.com/template_test/" rel="nofollow noreferrer">http://amit-verma.com/template_test/</a></p>
  
  <p>i am having a slight problem with the alignment of the footer div. 
  i have a header at the top.</p>
  
  <p>div = maincontent <br>
  {<br>
    two divs for content, side by side.<br>
    another 2 divs side by side below the content div.<br>
  }<br></p>
  
  <p>//just to represent. i know this is not html ;)</p>
  
  <p>now i want the footer div to start after the maincontent div finishes. i can do that if i specify a fixed height for the maincontent div. but i dont want to specify a height for it. if i dont specify the height, the footer div starts at the middle of the page. </p>
  
  <p>what am i doing wrong?</p>
  
  <p><br>
  <strong>the code</strong></p>
  
  <h1>sidebar {</h1>
  
  <pre><code>margin-top: 10px;
  width: 300px;
  float: right;
  text-align: justify;
  font-size: 14px;
  line-height: 18px;
  color: #FFF;
  </code></pre>
  
  <p>}</p>
  
  <h1>maincontent {</h1>
  
  <pre><code>margin-top: 10px;
  width: 620px;
  height: 590px;
  text-align: justify;
  font-size: 14px;
  line-height: 18px;
  </code></pre>
  
  <p>}</p>
  
  <h1>maincontent .rect {</h1>
  
  <pre><code>width: 580px;
  background-color: #dbdddf;
  margin-right: 10px;
  padding: 15px;
  </code></pre>
  
  <p>}</p>
  
  <h1>maincontent .square {</h1>
  
  <pre><code>width: 270px;
  float: left;
  min-height: 270px;
  margin-top: 10px;
  margin-right: 10px;
  background-color: #c6c7c7;
  padding: 15px;
  </code></pre>
  
  <p>}</p>
  
  <h1>footer {</h1>
  
  <pre><code>background-color: #b1977f;
  width: 880px;
  font-size: 14px;
  padding: 20px;
  text-align: left;
  color: #FFF;
  </code></pre>
  
  <p>}</p>
  
  <p>HTML
  <br></p>
  
  <pre><code>   &lt;div id="sidebar"&gt;
      &lt;div class="box"&gt;
          &lt;/div&gt;
      &lt;div class="box"&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
  &lt;div id="maincontent"&gt;
      &lt;div class="rect"&gt;
          &lt;/div&gt;
      &lt;div class="square"&gt;
          &lt;/div&gt;
      &lt;div class="square"&gt;
  
          &lt;/div&gt;
      &lt;/div&gt;
  
  &lt;div id="footer"&gt;
      &lt;/div&gt;
  </code></pre>