Why doesn't this work in IE?

Trying for this:

______________________
|......|.............|
|......|.............|
|......|.............|
|......|.............|
|______|.............|
|......|.............|
|......|.............|
|______|_____________|

... but I get this:

______________________
|......|.............|
|......|.............|
|......|.............|
|......|.............|
|......|.............|
|......|.............|
|______|.............|
|______|_____________|

Here's the code:

<div style="width:100%" align="center">
<div style="width: 1100px; padding: 18px; position:absolute; top: 168px; left: 15%; align: left">
<div style="width:100%">

<table style=" width:100%;">
    <tr valign="top">
    <td style="width:170px; height:475px;">
        <div id="vertnav" style="width:170px">NAVBAR</div>
    </td>

    <td width=12px></td>

    <td rowspan="2">
        <div style=" background-color: #f6efdf; padding: 0px 20px 0px 20px; height:590px; overflow-y: scroll;">CONTENT</div>
    </td>
    </tr>


    <tr>
    <td></td><td></td>
    </tr>
</table>
</div>
</div>
</div>

The navigation bar's cell height should be 475, and the content cell's height should be 590px. With the co开发者_如何学编程ntent height cell spanning two rows, this should make the space under the navigation bar ~125px. It works in FF, but it is more like 5px in IE.

What am I (or IE) doing wrong?

IE has issues with table cell content. It doesn't show empty cells at all. Try putting a   inside each empty cell.

And a general thought - get rid of the table.

It won't validate for a start - the 'width=12px' bit needs quotes around the value.

<td></td> pairs without an intervening character (perhaps  ) are likely to give you strange results.

But make sure it validates before worrying about browser differences.