title: CSS three column layout, liquid center, no left-margin!
body: <p>I am all in favor of CSS based layouts, but this one I just can't figure out. With a table it is oh-so-easy:</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;&lt;title&gt;Three Column&lt;/title&gt;&lt;/head&gt;
  &lt;body&gt;
  &lt;p&gt;Test&lt;/p&gt;
  &lt;table style="width: 100%; border: 1px solid black; min-height: 300px;"&gt;
  &lt;tr&gt;
  &lt;td style="border: 1px solid green;" colspan="3"&gt;Header&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
      &lt;td style="border: 1px solid green; width: 150px;" rowspan="2"&gt;Left&lt;/td&gt;
      &lt;td style="border: 1px solid yellow;"&gt;Content&lt;/td&gt;
      &lt;td style="border: 1px solid blue; width: 200px;" rowspan="2"&gt;Right&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
      &lt;td style="border: 1px solid fuchsia;"&gt;Additional stuff&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;&lt;td style="border: 1px solid green;" colspan="3"&gt;Footer&lt;/td&gt;&lt;/tr&gt;
  &lt;/body&gt;
  &lt;html&gt;
  </code></pre>
  
  <ul>
  <li>Left is fixed width</li>
  <li>Right is fixed width</li>
  <li>Content is liquid</li>
  <li>Additional stuff sits beneath content</li>
  </ul>
  
  <p>Now here is the important part: "Left" <strong>may not exist</strong>. Again this is easy with the table. Delete the column and "Content" expands. Beautiful.
  I have looked through many examples (and "holy grails") of liquid and table less three-column CSS based layouts, but I have not found one which is not using some kind of margin-left for the middle column ("Content"). Any margin-left will suck once "Left" is gone as "Content" will just stay at it's place.</p>
  
  <p>I'm just about to switch to old school table based layout for this problem, so I'm hoping someone has some idea - I don't care about excess markup, wrappers and the like, I would just like to know how to solve this with plain CSS. Btw: look at how easy equal height columns are...</p>
  
  <p>Cheers</p>
  
  <p>PS: No CSS3 please</p>