title: Building a resizable HTML layout
body: <pre><code>&lt;div id="main" style="height: 100%"&gt;
      &lt;div id="content"&gt;
      &lt;/div&gt;
      &lt;div id="toolbar" style="height: 50px"&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>So, <code>main</code> div is been resized, <code>toolbar</code> should have fixed height and <code>content</code>'s height should be = <code>height of main</code> - 50px. How is it possible to do so using styles only (without using JavaScript)?</p>