title: Three columns 100 percent height css layout
body: <p>I am really stuck with the css for this layout. Here is my html code :</p>
  
  <pre><code>&lt;body&gt;
      &lt;div id="main"&gt;
          &lt;div id="left"&gt;
              menu
          &lt;/div&gt;
          &lt;div id="middle"&gt;
          &lt;/div&gt;
          &lt;div id="right"&gt;
              sidebar
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>I want three columns left, middle and right with the width of 25%, 60%, and 15% percent width of the parent and all expand to the 100 percent height of their parent (main).
  in the mean time I want the main div to have a minimum height of the browser window and maximum height of its children.</p>