rowspan with css

Question

my website layout uses a table like this.

 <table>
<tr>
<td align="left" valign="top" rowspan="2" style="padding-right:41px;">
</td>
<td align="left" valign="top" width="440px">
</td>
</tr>
<tr>
<td align="left" valign="top" width="440px">
</td>
</tr>
</table>

a nav bar on the left which takes up two rows and two columns.

How can I translate this to CSS? how do i handle rowspan?

I've read that using a table will slow down rendering the page, because the browser has to render all columns first before it can render the table. so if one column contains 1000 nested divs the other columns have to wait to render. Is this true?

Answer 1

I think you want something like this:

CSS:

div#navBar {
    float: left;
    padding-right: 41px;
}
div.nonHeader {
    width: 440px;
}

HTML:

<div id="navBar"></div>
<div id="header" class="nonHeader"></div>
<div id="bodyText" class="nonHeader"></div>

That forces the navbar to the left of the header and body text divs, which are fixed-width.

I do wonder if you don't want the navBar div to be fixed-width and the other two flexible, however.