title: DIV-only two column CSS layout
body: <p>I'm reworking a layout currently using tables for a two-column design, and ran into some problems.</p>
  
  <pre><code>&lt;div id="frame"&gt;
  
   &lt;div id="leftcol"&gt;
    &lt;div id="1"&gt;blah&lt;/div&gt;
   &lt;/div&gt;
  
   &lt;div id="leftcol"&gt;
    &lt;div id="2"&gt;blah&lt;/div&gt;
    &lt;div id="3"&gt;blah&lt;/div&gt;
   &lt;/div&gt;
  
  &lt;/div&gt;
  
  #leftCol
  {
   margin-right: 10px;
   width: 49%;
   float: left;
  }
  
  #rightCol
  { 
   width: 49%;
   float: left;
  }
  </code></pre>
  
  <p>Originally I had a two-columned table with <code>width=100%</code> - this worked perfectly in Firefox, but in IE the table overflowed the <code>#frame</code> div container. I removed this table and added two floated divs, but I still have issues getting the columns to be equal.</p>
  
  <p>All of my content resides inside the div <code>#frame</code>, which has height constraints as well as padding and a margin (I use this to leave a "gutter" around the edge of the page). </p>
  
  <p>I need the two floated DIV columns to be the same width, and sit next to each other with a 10px (ish) gutter in between. I tried making both <code>width: 50%</code>, but this fails because the container they are in (<code>#frame</code>) is smaller width-wise then the whole body of the page. (If I get rid of the gutter padding, it works in FF but still not in IE.  </p>
  
  <p>Making each column width: 49% works, but looks ugly as the size changes between browsers and the right column does not line up with the edge of the <code>#frame</code> container. </p>
  
  <p>I tried doing this before but ultimately went back to tables 9since it seemed to be working), but now that I see it's incompatible with IE I've been working for hours to find a cross-browser css solution. Any ideas?</p>