Tables for layout
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
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>
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.
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?
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.
martin klepsch Says:
please increase line height a bit ;)
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.
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 :)
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