title: Can you do this HTML layout without using tables?
body: <p>Ok, I had a simple layout problem a week or two ago.  Namely sections of a page needed a header:</p>
  
  <pre class="lang-none prettyprint-override"><code>+---------------------------------------------------------+
  | Title                                            Button |
  +---------------------------------------------------------+
  </code></pre>
  
  <p>Pretty simple stuff.  Thing is table hatred seems to have taken over in the Web world, which I was reminded of when I asked <a href="https://stackoverflow.com/questions/519234/why-use-definition-lists-dl-dd-dt-tags-for-html-forms-instead-of-tables">Why use definition lists (DL,DD,DT) tags for HTML forms instead of tables?</a>  Now the general topic of tables vs divs/CSS has previously been discussed, for example:</p>
  
  <ul>
  <li><a href="https://stackoverflow.com/questions/83073/div-vs-table">DIV vs Table</a>; and</li>
  <li><a href="https://stackoverflow.com/questions/30251/tables-instead-of-divs">Tables instead of DIVs</a>.</li>
  </ul>
  
  <p>So this isn't intended to be a general discussion about CSS vs tables for layout.  This is simply the solution to one problem.  I tried various solutions to the above using CSS including:</p>
  
  <ul>
  <li>Float right for the button or a div containing the button;</li>
  <li>Position relative for the button; and</li>
  <li>Position relative+absolute.</li>
  </ul>
  
  <p>None of these solutions were satisfactory for different reasons.  For example the relative positioning resulted in a z-index issue where my dropdown menu appeared under the content.</p>
  
  <p>So I ended up going back to:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;style type="text/css"&gt;
  .group-header { background-color: yellow; width: 100%; }
  .group-header td { padding: 8px; }
  .group-title { text-align: left; font-weight: bold; }
  .group-buttons { text-align: right; }
  &lt;/style&gt;
  &lt;table class="group-header"&gt;
  &lt;tr&gt;
    &lt;td class="group-title"&gt;Title&lt;/td&gt;
    &lt;td class="group-buttons"&gt;&lt;input type="button" name="Button"&gt;&lt;/td&gt;
  &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>And it works perfectly.  It's simple, as backward compatibile as it gets (that'll work probably even on IE5) and it just works.  No messing about with positioning or floats.</p>
  
  <p>So can anyone do the equivalent without tables?</p>
  
  <p>The requirements are:</p>
  
  <ul>
  <li><strong>Backwards compatible:</strong> to FF2 and IE6;</li>
  <li><strong>Reasonably consistent:</strong> across different browsers;</li>
  <li><strong>Vertically centered:</strong> the button and title are of different heights; and</li>
  <li><strong>Flexible:</strong> allow reasonably precise control over positioning (padding and/or margin) and styling.</li>
  </ul>
  
  <p>On a side note, I came across a couple of interesting articles today:</p>
  
  <ul>
  <li><a href="http://www.flownet.com/ron/css-rant.html" rel="noreferrer">Why CSS should not be used for layout</a>; and</li>
  <li><a href="http://iamelgringo.blogspot.com/2009/02/tables-vs-css-css-trolls-begone.html" rel="noreferrer">Tables vs CSS: CSS Trolls begone</a></li>
  </ul>
  
  <p><strong>EDIT:</strong> Let me elaborate on the float issue.  This sort of works:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;html&gt;
    &lt;head&gt;
      &lt;title&gt;Layout&lt;/title&gt;
      &lt;style type="text/css"&gt;
        .group-header, .group-content { width: 500px; margin: 0 auto; }
        .group-header { border: 1px solid red; background: yellow; overflow: hidden; }
        .group-content { border: 1px solid black; background: #DDD; }
        .group-title { float: left; padding: 8px; }
        .group-buttons { float: right; padding: 8px; }
      &lt;/style&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;div class="group-header"&gt;
        &lt;div class="group-title"&gt;This is my title&lt;/div&gt;
        &lt;div class="group-buttons"&gt;&lt;input type="button" value="Collapse"&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="group-content"&gt;
        &lt;p&gt;And it works perfectly. It's simple, as backward compatibile as it gets (that'll work probably even on IE5) and it just works. No messing about with positioning or floats.&lt;/p&gt;
        &lt;p&gt;So can anyone do the equivalent without tables that is backwards compatible to at least FF2 and IE6?&lt;/p&gt;
        &lt;p&gt;On a side note, I came across a couple of interesting articles today:&lt;/p&gt;
      &lt;/div&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Thanks to <a href="https://stackoverflow.com/users/42092/ant-p">Ant P</a> for the <code>overflow: hidden</code> part (still don't get why though).  Here's where the problem comes in.  Say I want the title and button to be vertically centered.  This is problematic because the elements are of different height.  Compare this to:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;html&gt;
    &lt;head&gt;
      &lt;title&gt;Layout&lt;/title&gt;
      &lt;style type="text/css"&gt;
        .group-header, .group-content { width: 500px; margin: 0 auto; }
        .group-header { border: 1px solid red; background: yellow; overflow: hidden; }
        .group-content { border: 1px solid black; background: #DDD; }
        .group-header td { vertical-align: middle; }
        .group-title { padding: 8px; }
        .group-buttons { text-align: right; }
      &lt;/style&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;table class="group-header"&gt;
      &lt;tr&gt;
        &lt;td class="group-title"&gt;This is my title&lt;/td&gt;
        &lt;td class="group-buttons"&gt;&lt;input type="button" value="Collapse"&gt;&lt;/td&gt;
      &lt;/tr&gt;
      &lt;/table&gt;
      &lt;div class="group-content"&gt;
        &lt;p&gt;And it works perfectly. It's simple, as backward compatibile as it gets (that'll work probably even on IE5) and it just works. No messing about with positioning or floats.&lt;/p&gt;
        &lt;p&gt;So can anyone do the equivalent without tables that is backwards compatible to at least FF2 and IE6?&lt;/p&gt;
        &lt;p&gt;On a side note, I came across a couple of interesting articles today:&lt;/p&gt;
      &lt;/div&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>which works perfectly.</p>