title: Tree floating divs height 100%, one fixed width - middle overlows
body: <p>I want to have a div with fixed width (1000px) in the center, one div floats left and fills the background, another one fills the background on the right side. All have 100% height. </p>
  
  <pre><code>&lt;div id="left"&gt;
  &lt;/div&gt;
  &lt;div id="right"&gt;
  &lt;/div&gt;
  &lt;div id="main"&gt;
     Text
  &lt;/div&gt;
  </code></pre>
  
  <p>The css:</p>
  
  <pre><code>html, body{
  height:100%;
  min-height:100%;
  width:100%;
  
  padding:0;
  margin:0;
  }
  
  #left{
  position: relative;
  width:50%;
  height:100%;
  top:0;
  left:-500px;
  float:left;
  }
  #right{
  position:relative;
  width:50%;
  height:100%;
  top:0;
  right:-500px;
  float:right;
  }
  
  #main{
  width: 1000px;
  margin:auto;
  }
  </code></pre>
  
  <p>The problem is that content breaks out of the middle div. It is still in the div, but under the other ones.</p>
  
  <p>How can i fix it, that the content is shown on top of the middle div?</p>
  
  <p>For better imagination: <a href="http://codepen.io/anon/pen/eluGt" rel="nofollow">http://codepen.io/anon/pen/eluGt</a></p>