title: Dynamic size, two column layout with one column vertically and horizontally aligned, legacy browser support
body: <p>I am trying to create a two column layout, with content in column 1 both horizontally and vertically aligned in the middle, whereby the content of column 2 will vary in size.  The width of both columns is fixed to 50% of the width of the screen.</p>
  
  <p>In modern CSS complaint browsers I can simply do the following:</p>
  
  <p>CSS:</p>
  
  <pre><code>#wrapper
  {
      display: table;
      width: 100%;
  
      /* for illustration purposes */
      background: #ddd;
  }
  
  #left-column
  {
      display: table-cell;
      width: 50%;
      text-align: center;
      vertical-align: middle;
  
      /* for illustration purposes */
      background: #fdd;
  }
  
  #right-column
  {
      display: table-cell;
  
      /* for illustration purposes */
      background: #ddf;
  }
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="wrapper"&gt;
      &lt;div id="left-column"&gt;
          &lt;p&gt;I am both horizontally and vertically centered in column 1&lt;/p&gt;
      &lt;/div&gt;
      &lt;div id="right-column"&gt;
          &lt;p&gt;I am dynamic content in column 2, i.e. my size will vary&lt;/p&gt;
          &lt;p&gt;I am dynamic content in column 2, i.e. my size will vary&lt;/p&gt;
          &lt;p&gt;I am dynamic content in column 2, i.e. my size will vary&lt;/p&gt;
          &lt;p&gt;I am dynamic content in column 2, i.e. my size will vary&lt;/p&gt;
          &lt;p&gt;I am dynamic content in column 2, i.e. my size will vary&lt;/p&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>However, the bad news is I also need this to work in IE6, and IE7...</p>
  
  <p>The solutions I've seen so far are quite ugly and involve lots of nested divs.  What's the cleanest way to achieve this so that it will work in all browsers?  I've experimented with float: left, for the two column layout, but my main problem is the vertical alignment in the first column.</p>
  
  <p>PS. I don't want to use tables for the layout, although it does work, it's bad for screen readers and therefore breaks my accessibility guidelines.</p>
  
  <p>Thanks in advance!</p>