title: Welcome to HTML Tables Anonymous
body: <p>Hl, my name is savinger, and I have a problem. I just can't help but use <code>&lt;table&gt;</code>s. I'm addicted, and it's a problem for me. I need some support, and for some wise web designers to show me the error of my ways.</p>
  
  <p><strong>2 Column Layout</strong></p>
  
  <p>So I'm trying to make a simple two column layout: navigation on the left, content on the right. A quick table and I'm good to go.</p>
  
  <pre><code>&lt;table&gt;
    &lt;tr&gt;
      &lt;td valign="top"&gt;&lt;!-- Navigation --&gt;&lt;/td&gt;
      &lt;td valign="top"&gt;&lt;!-- Content --&gt;&lt;/td&gt;
    &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>Fairly happy with the result. Content is within the flow of the page. I can specify width of cells, have them expand to fill space, or shrink to fit content. But once I start introducing nested tables (for legitimate tabular data, of course)... markup becomes ugly and difficult to read and maintain. And besides, all my web designer buddies have resorted to name calling.</p>
  
  <p>So what are my options? I rather like <code>position:absolute;</code>. With just a little css...</p>
  
  <pre><code>.left { position:absolute; top:0; bottom:0; left:0; width:200px; }
  .right { position:absolute; top:0; bottom:0; left:200px; right:0; }
  </code></pre>
  
  <p>...and minimal HTML markup...</p>
  
  <pre><code>&lt;div class="left"&gt;&lt;!-- Navigation --&gt;&lt;/div&gt;
  &lt;div class="right"&gt;&lt;!-- Content --&gt;&lt;/div&gt;
  </code></pre>
  
  <p>Slick! Markup is clear, design is fluid. But now I try and add something below my slick two columns and I run into a <a href="http://jsfiddle.net/HZxBB/2/" rel="nofollow">thorough mess (jsFiddle)</a>. I'm not working in the flow of the page, but I don't know how tall my content is going to be! So I can't specify height. I give up easily... so let's try something else.</p>
  
  <p>I'll be honest: <code>float</code> scares me. The markup isn't obvious to read, and the floating elements seem to have a mind of their own, with sinister motives to ruin my design in fringe cases. <a href="http://jsfiddle.net/rw86y/" rel="nofollow">Consider this jsfiddle.</a> I'm still not working in the flow of the page. And I wanted static width navigation with fluid content? What do?</p>
  
  <p>I don't know guys. The tables seem like a much better choice. Someone talk some sense into me. I may use again...</p>