title: making sure all my tabular content is vertically aligned?
body: <p>Im having trouble making my table contents vertically aligned and was wondering if you could help, ive added border-collapse:collapse to  and given my  border in order for the table styling to work correctly in IE7, if anyone has any suggestions on how I can produce a consistent table layout that would be great. btw I'm using a table as this content is worthy of a table.</p>
  
  <p>CSS</p>
  
  <pre><code>#myTable{width:810px;margin:0 auto;border-top:1px solid #f00;height:200px;overflow:auto;border-collapse:collapse;}
  #myTable tr{padding-right:0;margin-right:0;display:block;}
  #myTable td{float:left;border-bottom:1px solid #f00;padding-right:0;margin:0;font-size:16px;height:50px;padding:10px 0}
  #myTable .title{width:199px;}
  #myTable .description{width:481px;color:#ffc500;}
  #myTable .description a{color:#ffc500;}
  #myTable .logo{width:127px;text-align:right;}
  #myTable .logo a{display:block;line-height:0;vertical-align:middle}
  #myTable .logo img{vertical-align:middle;}
  </code></pre>
  
  <p>HTML</p>
  
  <pre><code>&lt;table id="myTable"&gt;
      &lt;tbody&gt;
         &lt;tr&gt;
          &lt;td class="title"&gt;Title&lt;/td&gt;
          &lt;td class="description"&gt;&lt;a href="#"&gt;Lorem ipsum sit amet dolar&lt;/a&gt;&lt;/td&gt;
              &lt;td class="logo"&gt;&lt;img src="http://dummyimage.com/130x50/000/fff" width="130" height="50" /&gt;&lt;/td&gt;
         &lt;/tr&gt;
          &lt;tr&gt;
          &lt;td class="title"&gt;Title&lt;/td&gt;
          &lt;td class="description"&gt;&lt;a href="#"&gt;Lorem ipsum sit amet dolar&lt;/a&gt;&lt;/td&gt;
              &lt;td class="logo"&gt;&lt;img src="http://dummyimage.com/130x50/000/fff" width="130" height="50" /&gt;&lt;/td&gt;
         &lt;/tr&gt;
          &lt;tr&gt;
          &lt;td class="title"&gt;&lt;/td&gt;
          &lt;td class="description"&gt;&lt;a href="#"&gt;Lorem ipsum sit amet dolar&lt;/a&gt;&lt;/td&gt;
              &lt;td class="logo"&gt;&lt;img src="http://dummyimage.com/130x50/000/fff" width="130" height="50" /&gt;&lt;/td&gt;
         &lt;/tr&gt;
          &lt;tr&gt;
          &lt;td class="title"&gt;Title&lt;/td&gt;
          &lt;td class="description"&gt;&lt;a href="#"&gt;Lorem ipsum sit amet dolar&lt;/a&gt;&lt;/td&gt;
              &lt;td class="logo"&gt;&lt;img src="http://dummyimage.com/130x50/000/fff" width="130" height="50" /&gt;&lt;/td&gt;
         &lt;/tr&gt;
      &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>And here is a link to my fiddle: <a href="http://jsfiddle.net/EEwvG/1/" rel="nofollow">http://jsfiddle.net/EEwvG/1/</a>
  ​</p>
  
  <p>​</p>