title: Table Cell image and text alignment
body: <p>I have a three column layout where sometimes I want to have text in one column adjacent to an image in another column. My issue is that when I insert an image into one of the columns, the text in the adjacent column(s) positions itself adjacent to the bottom of the image in the adjacent column rather than at the top of the column as one would expect.</p>
  
  <p>My basic structure:</p>
  
  <pre><code>&lt;div class="fwcol"&gt;
      &lt;div class="col"&gt;
          &lt;div class="ttl"&gt;
          &lt;img src="images/placeholder.png" width="571" height="540"&gt;
          &lt;p&gt;Bla Bla Bla &lt;/p&gt;
          &lt;/div&gt;&lt;!--ttl--&gt;
          &lt;div class="otr"&gt;Column 2 Content
          &lt;/div&gt;&lt;!--otr--&gt;
      &lt;/div&gt;&lt;!--col--&gt;
  &lt;/div&gt;&lt;!--fwcol--&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.fwcol {
      float: left;
      width: 966px;
  }        
  .ttl {
      display: table-cell;
      padding: 20px;
      width: 571px;
      background: #FFF;
  }
  .col {
      width: 966px;
      display: table;
      table-layout: fixed;
      border-collapse: separate;
      border-spacing: 20px;
  }
  </code></pre>