Using CSS and Divs to get rid of slow loading tables

[asp4bunnies]

I am developing a new site layout that places both the navigation, ads and content within a table. The reason for doing this is I like to be able to make the table expand with the users' browser resolution (I'm aware that if it's a fixed size, I can easily use Divs to do this).

The downside is that with so much content on the page, the table loads really slowly in IE and the browser looks blank until it does.

The layout looks as follows:

==========================
HEADER
==========================
¦nav ¦ CONTENT GOES HERE ¦ ads¦
¦nav ¦ CONTENT GOES HERE ¦ ads¦
¦nav ¦ CONTENT GOES HERE ¦ ads¦
¦nav ¦ CONTENT GOES HERE ¦ ads¦
¦nav ¦ CONTENT GOES HERE ¦ ads¦
¦nav ¦ CONTENT GOES HERE ¦ ads¦
==========================
FOOTER
==========================

Does anyone know how to do exactly the same layout either using tables and/or divs/css in such a way that the content will display on the screen as it's downloaded?

The only thing I need to still be able to do is make sure that the center column with the content is expandable to the browser resolution (The nav and ad columns should be fixed at 150 pixels each).

Thanks for any direction anyone can provide!

[skube]

Well, it would really depend on exactly your needs...there doesn't appear to be a one solution fits all. You could try something like:

<style>
body {margin:0; padding:0}
#nav, #ads {position:absolute; top:50px;width:150px; background-color:pink}
#content {margin-left:150px; margin-right:150px}
#nav {left:0;}
#ads {right:0}
#head,#foot {clear:both; background-color:lightblue; height:50px}
</style>
<div id="head">This is my header</div>
<div id="nav">This is my nav</div>
<div id="content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque turpis enim, mattis vel, molestie in, ornare tristique, ante. Donec ut purus ac risus suscipit cursus. Ut ullamcorper, nisl aliquet tristique volutpat, lacus turpis dignissim dui, at ornare pede lectus at augue. Fusce varius volutpat ipsum. Aenean odio mi, tincidunt a, lacinia pulvinar, vestibulum in, justo. Vivamus velit. Sed tristique facilisis mauris. Donec ultrices, erat sit amet bibendum feugiat, nulla dui faucibus orci, vitae vestibulum eros mi quis metus. Duis ut ante eget quam semper consequat. In iaculis lobortis nulla. Vestibulum scelerisque magna vel lorem. Etiam dolor.
</div>
<div id="ads">This is my ads</div>
<div id="foot">This is my footer</div>

Alternatively, you could try what others have already tried [css-discuss.incutio.com].

cheers,
s/<ube

[asp4bunnies]

Your suggestion is perfect. The only thing I'd change about it is the ability to set a minimum size at which it can't collapse anymore (so for 640x480 screens, the page wouldn't collapse to the point where the ad column begins to cover the center column). To do that would I need to start getting into some advance scripting?

[Saltminer]

Maybe you could use z-index to give the center column a higher index than the ad. Then when the page collapses the center column will cover the ad rather than the ad covering the center column.