display: table-cell; in ie6/7 workaround

Question

I'm trying to build a single row css table with multiple cells that has text that is vertically centered inside the cells. Basically the table behaviour I am trying to mimic with css is this:

<table width="100%" height="54" border="0" bgcolor="red">
 <tr>
    <td width="20%">text</td>
    <td width="20%">text</td>
    <td width="20%">text</td>
    <td width="20%">text</td>
    <td width="20%">text</td>
  </tr>
</table>

So that my code is semantically correct I want to use divs to achieve the same effect.

<div class="job_wrapper">
 <div class="info">
  <div>01</div>
  <div>Campaign 001</div>
  <div>DEMO Client</div>
  <div>128</div>
  <div>449</div> 
 </div>
</div>

Problem is that the workaround for display:table-cell in IE involved using the float property which overrides the display value to block. hence I lose the vertical centering of text in a table cell.

Is there a workaround to display:table-cell in IE that still gives me the ability to center text vertically in IE?

Cheers

Answer 1

check out the style sheet from http://jogger.pl/404.

they have an interesting workaround in there.