title: css three column layout
body: <p>I am trying to set up a border layout with top, left, center, right, bottom. I have seen a few examples and tried them, but none of them seem to work. The main problem is with the left, center, and right columns. I can only get two divs aligned horizontally, the third always falls below the footer.  I need this to be resizable. Preferably the center pane will fill the full until the borders.</p>
  
  <p>I have tried float left and float right but it didn't make a difference.</p>
  
  <p>This is what I have tried so far.
      <a href="http://jsfiddle.net/xQVWs/2/" rel="nofollow">http://jsfiddle.net/xQVWs/2/</a></p>
  
  <pre><code>&lt;body&gt;
  &lt;div class="top-wrapper"&gt;
      &lt;div class="content-wrapper"&gt;
          &lt;header&gt;
              header
          &lt;/header&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="mid-section"&gt;
      &lt;div class="left-wrapper"&gt;
          Left Pane
      &lt;/div&gt;
      &lt;div class="main-content"&gt;
          Main pane
      &lt;/div&gt;
      &lt;div class="right-wrapper"&gt;
          right pane
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="bottom-wrapper"&gt;
      &lt;div class="content-wrapper"&gt;
          footer
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;/body&gt;
  </code></pre>