title: Simple 2 column div layout
body: <p>I'm trying to create a very simple 2 column layout with floating <code>div</code>'s in html. The problem is that the following <code>div</code>, <code>foot</code> is always being rendered to the right of the <code>right</code> div. I know I should be using a <code>clear</code> statement somewhere, but I'm not sure which is the proper spot.</p>
  
  <p>Also, as you can see in left I've explicitly specified the height of <code>left</code>. Is there a way to set force <code>right</code> to be of the same height without specifying it again? </p>
  
  <pre><code>&lt;div id="main"&gt;
      &lt;div id="left" style="float: left; width: 150px; background: #DDDDDD; height: 500px;"&gt; 
          left column
      &lt;/div&gt;
  
      &lt;div id="right" style="float: left; background: #EEEEEE;"&gt;
          right column
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div id="foot"&gt;
      footer
  &lt;/div&gt;
  </code></pre>