That’s right, I’ve created a 3 column liquid layout web-side that:
- Works in all Browsers
- Needs no dirty hacks
- Easy to use and understand
So web designers, labour no more, I bring you my solution to the age old problem of creating a 3 column liquid layout.
Drum Roll Please ….
New Wallasean’s Super-Dooper 3 Column Liquid Layout
<table>
<tr>
<td style=”width:200px;”>col 1</td>
<td style=”width:100%;”>col 2</td>
<td style=”width:200px;”>col 3</td>
</tr>
</table>
At this stage, if you don’t have a wry smile on the face then either:
a) You are one of my regular readers, looking for my latest musings on the global economy, Wirral, Live Music, Poetry and stuff, and it’s gone right over your head. Apologies to both of you.
b) You’ve put an axe through your monitor in a fit of rage!
Ok, now to the serious point of my post, why are so many techy geek types such zealots?
The humble table has been around since the early days of HTML, certainly when I learned HTML in 1994 it was already around.
They were always meant for tabular layouts like spreadsheet data, but as CSS hadn’t been invented yet, creative designers hijacked them to help them layout the page the way they wanted.
Along came CSS and the W3 told us we were bad people for using tables to layout our pages, use CSS instead.
I’ve no problem with using CSS, I like the concept of CSS, but when it comes to something as simple (at least it was using tables) as a 3 column layout, it is a complete nightmare. There are entire websites and books dedicated to discovering the holy grail of a 3 column liquid layout using pure CSS, and people have come up with incredibly convoluted solutions using browser bugs and even javascript just to emulate something that was a piece of cake using Tables. Then there are hundreds of comments from people offering solutions to particular problems in particular browsers.
Are they nuts? Do they ever think for themselves, or just follow the crowd? They really seem to have lost the plot!
True enough, tables are hard to visualise in your mind, and nested tables are messy, but then div based layouts are equally hard to visualise, nested divs are not much nicer than nested tables, and tables are much more elegant and clean than long winded css to achieve the same thing.
Take the layout I downloaded today to base our website’s layout on. You have to put the code for the middle column first then float the left column over and then finally float the right column, with lots of negative margins and other gobbledegook!
As for future-proofing, they can’t deprecate tables until they find a new way of presenting spreadsheet like data. I can’t believe that some people use javascript solutions, forcing their users to have javascript turned on, just to recreate what could be done easily in a table.
In fact the only reasons not to use tables for layout is:
a) The W3 (I wonder if they’ve ever had to create a commercial website) tell you not to. And they like making rules almost as much as MS like breaking them!
b) Geeky Zealots will make you feel unclean.
You take your life in your hands going into a forum and asking “How do I emulate a table layout using just CSS?”. Instead of welcoming a new recruit to their way of thinking, some arrogant sod who really needs to get a life, will tear into them just for having the gall to mention tables and layout in the same sentence!
And because of all that I spent most of today writing (and adapting) a ton of CSS rather than spend 15 minutes creating the same thing in a table, the way I did it 14 years ago!
I don’t call that progress!
Unfortunately in your layout, the center column does not come first in your source code (which is required for good for SEO). Try this 3 column layout instead.
By: Matthew James Taylor on October 22, 2008
at 4:37 am
I’m one of the ones who hates tables, but that is because I came along after tables were no longer cool. =)
The 3 column layout thing is annoying, though.
By: Seth Stacey on October 23, 2008
at 8:27 pm