title: CSS: Vertical column layout without <table>
body: <p>Ok, I leaned html &amp; css back in 2001. I was used to do something like this (To create a website with a "vertical-column" layout):</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;Vertical-column layout&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;table id="doc" &gt;
  &lt;!-- header --&gt;
      &lt;tr&gt;
      &lt;td id="header" colspan="3"&gt;&lt;!-- header code/php include --&gt;&lt;/td&gt;
      &lt;/tr&gt;
  &lt;!-- / header --&gt;
  
  &lt;!-- / content --&gt;
      &lt;tr&gt;
      &lt;td id="col1" name="menu"&gt;&lt;!-- content code/php include --&gt;&lt;/td&gt;
      &lt;td id="col2" name="content_left"&gt;&lt;!-- content code/php include --&gt;&lt;/td&gt;
      &lt;td id="col3" name="content_right"&gt;&lt;!-- content code/php include --&gt;&lt;/td&gt;
      &lt;/tr&gt;
  &lt;!-- / content --&gt;
  
  &lt;!-- footer --&gt;
      &lt;tr&gt;
      &lt;td id="footer" colspan="3"&gt;&lt;!-- header code/php include --&gt;&lt;/td&gt;
      &lt;/tr&gt;
  &lt;!-- / footer --&gt;
  &lt;/table&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Easy, everything is automatically aligned the way I want, no css headache etc. Life was good back then. HOWEVER, not so long ago, I read that this approach should no longer be used. I was going to try a new way using a bunch of div's, but w3c &amp; w3c's validation does not like you using block elements as inline elements...WTF!!!</p>
  
  <p>So...my frustration lead me to ask you guys:</p>
  
  <p><strong>HOW?</strong> How to accomplish something like this in "modern way"...as easy as possible? Does html 5 has a better way?<br/>
  <strong>WHY?</strong> Why is it that now we should not use this table approach to get a "vertical column layout" on a website?</p>