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.
8 comments
Gravatar for James Logsdon

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>

Gravatar for Brian Moon

Brian Moon Says:

It is fluid, just not dynamicly being sized for your browser width. The elements within my page should not need to know how large their container is to be appropriately sized. You misunderstand the idea of fluid.

Perhaps I should have been clearer because your example fails one important case. If the ad is taller than the rotator, the content after it will not flow correctly. Nice try, close. I was there months ago.

Gravatar for tim

tim Says:

Brian,

Your table layout fails one important case as well.

Adblock Plus.

The "advertisement" label remains, while ABP hides the ad contents. I know that is not an ideal case (you want ads to be displayed for revenue purposes), but it is a real scenario. Should your page account for content modification from such a popular plugin?

Gravatar for Brian Moon

Brian Moon Says:

No, I don't care what your 3rd party extensions do to screw up my page. That is a choice you make. That plugin is not popular. It used by less than one tenth of 1% of users.

Gravatar for martin klepsch

martin klepsch Says:

please increase line height a bit ;)

Gravatar for Tim

Tim Says:

https://addons.mozilla.org/en-US/firefox/addon/1865

69 million downloads
9.5 million active users

And ports coming to chrome/webkit.

It's worth noting and I was only curious of your (and other) opinions on the matter. Not attempting to argue or start a flame war.

Thanks for the reply.

Gravatar for Roger

Roger Says:

@James Logsdon: Thanks for posting that bit with the two column positioning. It solved a problem I've been trying to fix for quite some time on my own blog :)

Gravatar for Brian Moon

Brian Moon Says:

For those reading the comments about Adblock Plus, see my later post about ad stats. http://brian.moonspot.net/browser-stats-januaray-2010

Add A Comment

Your Name:


Your Email:


Your URL:


Your Comment: