title: css / header pushing two (absolutely positioned) stretched columns down
body: <p>After some hours of fiddling I thought I’d try my luck over here. I’m working on a website design which has quite a basic setup, it consists out of a header and two columns, which have their own scrollbars. This requires their position to be absolute, and to have a top value set, and a bottom value of 0px. This ofcourse prevents them from being in the normal document flow, and therefore they cant be pushed down by the header column.</p>
  
  <p>Any ideas on how to achieve this with css only are most welcome, it seems so straightforward!</p>
  
  <p>Best regards,
  Thijs.</p>
  
  <p>Code:</p>
  
  <p></p>
  
  <pre><code>&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head&gt;
  &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /&gt;
  &lt;title&gt;Testcase&lt;/title&gt;
  
  &lt;style type="text/css"&gt;
  
  body {
      margin: 0;
      padding: 0;
  }
  
  #header {
      background-color: #c8ffff;
  
  }
  
  #lr_container {
      position: absolute;
      top: 250px;
      bottom: 0px;
      left: 0px;
      right: 0px;
  }
  
  #leftcol {
      background-color: #ffdcff;
      position: absolute;
      top: 0px;
      left: 0px;
      bottom: 0px;
      width: 200px;
      overflow-y:scroll;
      overflow-x:hidden;
  }
  
  #rightcol {
      background-color: #ffffd1;
      position: absolute;
      top: 0px;
      left: 200px;
      bottom: 0px;
      right: 0px;
      overflow-y:scroll;
      overflow-x:hidden;
  }
  
  
  
  &lt;/style&gt;
  
  &lt;/head&gt;
  
  &lt;body&gt;
  
  &lt;div id="header"&gt;
  variable amount of content, needs to stretch in height and push the pink and yellow kids downwards&lt;br/&gt;&lt;br/&gt;!&lt;br/&gt;!&lt;br/&gt;&lt;br/&gt;!&lt;br/&gt;!&lt;br/&gt;&lt;br/&gt;!&lt;br/&gt;!&lt;br/&gt;&lt;br/&gt;!&lt;br/&gt;!
  &lt;/div&gt;
  
  &lt;div id="lr_container"&gt;
  
      &lt;div id="leftcol"&gt;
  
      has a fixed width, stretches to the bottom of window&lt;br/&gt;&lt;br/&gt;
      aa&lt;br/&gt;&lt;br/&gt;
      aa&lt;br/&gt;&lt;br/&gt;
      aa&lt;br/&gt;&lt;br/&gt;
      aa&lt;br/&gt;&lt;br/&gt;
      aa&lt;br/&gt;&lt;br/&gt;
      aa&lt;br/&gt;&lt;br/&gt;
      aa&lt;br/&gt;&lt;br/&gt;
      aa&lt;br/&gt;&lt;br/&gt;
      aa&lt;br/&gt;&lt;br/&gt;
      aa&lt;br/&gt;&lt;br/&gt;
      aa&lt;br/&gt;&lt;br/&gt;
      aa&lt;br/&gt;&lt;br/&gt;
      aa&lt;br/&gt;&lt;br/&gt;
      aa&lt;br/&gt;&lt;br/&gt;
      aa&lt;br/&gt;&lt;br/&gt;
      aa&lt;br/&gt;&lt;br/&gt;
      aa&lt;br/&gt;&lt;br/&gt;
      aa&lt;br/&gt;&lt;br/&gt;
      aa&lt;br/&gt;&lt;br/&gt;
  
      &lt;/div&gt;
  
      &lt;div id="rightcol"&gt;
      stretches to the right and stretches to the bottom of window&lt;br/&gt;&lt;br/&gt;
      bb&lt;br/&gt;&lt;br/&gt;
      bb&lt;br/&gt;&lt;br/&gt;
      bb&lt;br/&gt;&lt;br/&gt;
      bb&lt;br/&gt;&lt;br/&gt;
      bb&lt;br/&gt;&lt;br/&gt;
      bb&lt;br/&gt;&lt;br/&gt;
      bb&lt;br/&gt;&lt;br/&gt;
      bb&lt;br/&gt;&lt;br/&gt;
      bb&lt;br/&gt;&lt;br/&gt;
      bb&lt;br/&gt;&lt;br/&gt;
      bb&lt;br/&gt;&lt;br/&gt;
      bb&lt;br/&gt;&lt;br/&gt;
      bb&lt;br/&gt;&lt;br/&gt;
      bb&lt;br/&gt;&lt;br/&gt;
      bb&lt;br/&gt;&lt;br/&gt;
      bb&lt;br/&gt;&lt;br/&gt;
      bb&lt;br/&gt;&lt;br/&gt;
      bb&lt;br/&gt;&lt;br/&gt;
      bb&lt;br/&gt;&lt;br/&gt;
      bb&lt;br/&gt;&lt;br/&gt;
      bb&lt;br/&gt;&lt;br/&gt;
      bb&lt;br/&gt;&lt;br/&gt;
      bb&lt;br/&gt;&lt;br/&gt;
      &lt;/div&gt;
  
  &lt;/div&gt;
  
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><a href="http://www.thingsinprogress.net/test.html" rel="nofollow noreferrer">http://www.thingsinprogress.net/test.html</a></p>