Tables for layout
Fri, Jan 29, 2010 10:01 AM
I just read A case for table-based
design and was thrilled to know I am not the only one that
drowns in div soup from time to time. I do not for the most
part use tables for layout, but there are some cases where I just
can't make a set of divs do my bidding. The classic example is
having a two column layout where the left column LOADS
FIRST and is elastic and the right column is a fixed
size. The "loads first" is important in a world where the
rendering time of pages has become important. Ideally with
any page, the most important content would render first for the
user. In my case, this fixed column is an ad. As a web developer, I
don't care when the ad loads. The ads are a necessary evil in my
page layout. I must ensure that they load in an acceptable time
frame, but certainly not the first thing on the page. The specific
layout I am talking about is that of the top of dealnews.com.
It has a fixed size 300x250 ad on the right of the page and the
left side is elastic. I fiddled with divs for hours to get that to
act the way I wanted it to act. We use the grid CSS from OOCSS.org. Wonderful piece
of CSS that is. But, even with that in hand, I could not get the
elements to behave, in all browsers, the way I could with a simple
two column table where the left column's width is set to 100% and
the right column contains a div of width 300 pixels. It was so easy
to pull that off. Maybe CSS3 is going to solve this problem? I
don't know. If you have the magic CSS that can do what this page
does, let me know.
James Logsdon Says:
Maybe I'm not understanding the issue fully, but your page isn't fluid. So why the need for a "fluid" left column?
In any case, this is pretty simple to do with CSS. Something like:
<div id="hot-deals">
<div id="rotator"><!-- Rotator here --></div>
<div id="ad"><!-- Ad here --></div>
</div>
<style type="text/css">
#hot-deals { position: relative; }
#rotator { margin-right: 300px; }
#ad { width: 300px; position: absolute; top: 0; right: 0; }
</style>