title: HTML layout: adding sidebar column to existing site
body: <p>I have a site with a body that looks like that:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;body&gt;
    &lt;div id="header"&gt;...&lt;/div&gt;
    &lt;div id="content"&gt;...&lt;/div&gt;
    &lt;div id="footer"&gt;...&lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>No absolute / relative positioning tricks are used in these <code>div</code>s, but there are a lot of <code>float</code>s, <code>clear</code>s, <code>margin</code>s and <code>padding</code>s in styles of these <code>div</code>s and their inner elements. All this yields a site that looks like that:</p>
  
  <pre><code>┌───────────────┐
  │     header    │
  └───────────────┘
  ┌───────────────┐
  │    content    │
  └───────────────┘
  ┌───────────────┐
  │     footer    │
  └───────────────┘
  </code></pre>
  
  <p>My question is: how do I add one independent fixed-width left column (sidebar) with extra content that would contract whole site (header-content-footer) and shift them to the right.</p>
  
  <pre><code>┌────┐┌─────────┐
  │side││ header  │
  │bar │└─────────┘
  │    │┌─────────┐
  │    ││ content │
  │    │└─────────┘
  │    │┌─────────┐
  │    ││ footer  │
  └────┘└─────────┘
  </code></pre>
  
  <p>I know of one almost-ideal solution, but it is ugly and requires re-nesting existing divs:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;body&gt;
    &lt;table&gt;
      &lt;tr&gt;
        &lt;td id="sidebar"&gt;...&lt;/td&gt;
        &lt;td&gt;
          &lt;div id="header"&gt;...&lt;/div&gt;
          &lt;div id="content"&gt;...&lt;/div&gt;
          &lt;div id="footer"&gt;...&lt;/div&gt;
        &lt;/td&gt;
      &lt;/tr&gt;
    &lt;/table&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>Is it possible to do so elegantly, just adding one external sidebar element somewhere in body, i.e., like that?</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;body&gt;
    &lt;div id="sidebar"&gt;...&lt;/div&gt;
    &lt;div id="header"&gt;...&lt;/div&gt;
    &lt;div id="content"&gt;...&lt;/div&gt;
    &lt;div id="footer"&gt;...&lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>I've tried naive approaches - such as styling:</p>
  
  <pre class="lang-css prettyprint-override"><code>#sidebar { float: left; width: 20em; }
  </code></pre>
  
  <p>or</p>
  
  <pre class="lang-css prettyprint-override"><code>#header { margin-left: 20em; }
  #content { margin-left: 20em; }
  #footer { margin-left: 20em; }
  </code></pre>
  
  <p>This kind of works, but it breaks as soon <code>clear: both</code> or <code>clear: left</code> is encountered  in header/content/footer.</p>
  
  <p>So, are there any alternatives to table solution?</p>