The Perfect 3 Column Liquid Layout

http://matthewjamestaylor.com/blog/perfect-3-column.htm

by edw519 • 18 years ago

62 44 18 years ago

edw5192• 18 years ago

Whenever someone posts one of those "How to you like my app" posts, and I have to scroll horizontally, I mention it. And I usually get shouted down. They tell me to "graduate" from 800 x 600.

My argument has never been that any resolution is any better than any other. It's been that your app should work no matter what resolution your visitor arrives at.

This article is one excellent solution to that problem.

pxlpshr2• 18 years ago

The counter-argument to liquid-layouts is the fact that you need to specify a min-width which is not supported in all browsers (easy fix for jscript sure, but certainly not hack-free).

So for individuals like myself, who run at 1920x1200, legibility is a significant issue unless I manually resize my browser window which is about as much of a pain in the ass as scrolling horizontally.

Sadly, there is no perfect solution when designing for the web. Horses for courses.

cdr• 18 years ago

At that resolution, you'd be somewhat insane to maximize your browser window. You should be using software that divides your screen into regions.

xirium• 18 years ago

> min-width which is not supported in all browsers

There's a very simple workaround. Reference a transparent, one pixel image and specify the desired minimum width.

thaumaturgy4• 18 years ago

Ehh. Here are all of the following "shoulds" that I hear:

- Your app should work at any resolution - Your app should work on any browser - Your app should work on any platform, even grandma's old PII running Windows 98 - Your app should work on dialup, and be sexy for broadband - Your app should be accessible to the blind - Your app should not break when new browser versions are released

...and so on and so forth.

I am perfectly willing to write such a beast. Are you perfectly willing to pay for the hundreds of hours it would take to do it?

Every app designer is unfortunately forced to make some tradeoffs. In some cases, they make many tradeoffs, usually because nobody's willing to pay them to meet the needs of every user out there.

Not coding for 800x600 in these days of high resolution, high-bandwidth design, is a logical tradeoff.

edw5192• 18 years ago

Not coding for 800x600 in these days of high resolution, high-bandwidth design, is a logical tradeoff.

For whom? You? Or your client/employer?

There are millions of people, credit card in hand, who will just click somewhere else if they have too much trouble with your page.

My clients don't want to leave a single penny on the table. They're the ones who determine the tradeoff, not me.

axod3• 18 years ago

or you could just use tables, which are compatible with more browsers, and do something more useful with the time you save.

apathy• 18 years ago

have fun styling those tables for your clients without images

axod3• 18 years ago

You can apply all the standard styles to tables you do realise.

Look at the css, and it's just all a bit ugly with the work arounds for browsers.. A little hacky.

Also what if you want 4 columns? or maybe you want one of them a fixed width...

Sure, with the next version of css, tables will be eaiser to do with just css, but now it still seems like a hack to me.

mrkurt4• 18 years ago

Tables would make that not work so well on, say, an iPhone. The way it currently works, the "content" column is going to be the first thing visible when the browser's not wide enough to fit all three.

wvenable2• 18 years ago

Tables render better on mobile browser than pure CSS layouts. Mobile browsers are very smart about tables and almost always do the right thing. CSS is just too complex to get a good result when you need to scale down to a small screen.

babul7• 18 years ago

The whole reason the movement away from tables began is because complex layouts (nested tables) do not render correctly in different browsers and it does not separate style from content like CSS does.

Tables also makes it harder for crawlers/interpreters to understand the page as content may not be hierarchically correct due to layout issues, etc.

wvenable2• 18 years ago

If you use tables, you don't have to avoid CSS. They compliment each other. I agree that nested tables are ugly, but they're also completely necessary now because of CSS. Using tables to render your main multi-column layout wouldn't require any nesting. Also, tables are more likely to render in different browsers (including mobile browsers) than a complex CSS layout.

Given the number of CSS hacks and extra HTML tags in exactly the right order that is necessary for most column layouts the end result is almost always less complex with a table.

thaumaturgy4• 18 years ago

| ...and it does not separate style from content...

I often hear this mantra, but why is it really important?

I think it's a good goal, but not to the extent that a designer is spending a ton of extra hours working on a layout simply to try to ensure this perfect separation of style from content.

gills• 18 years ago

When did everyone forgot that HTML is presentation markup? It's object code. The content is back at the ranch in a database.

sanj• 18 years ago

Everyone appears to want CSS to do this. It seems to be hard.

Does it strike anyone else that this is a failing of CSS as a technology?

aston• 18 years ago

It's not so much as failing of CSS as a technology as it is an indication that CSS is not the language designers want it to be.

What really sucks is that it's actually pretty close to that language. Everything's fine until you hit the cross-browser compability issues or realize it's missing a few primitives (like the ability to easily create columns). Then you want to tear your hair out. And/or resort to hacks.

mrkurt4• 18 years ago

I dunno, CSS doesn't really provide much to help you scale a layout. Scaling using percentage widths is about as rudimentary as it gets.

thaumaturgy4• 18 years ago

Exactly. I think CSS started out as more of a typesetting layout, and has been stretched into this other beast.

To me, it doesn't make much sense to spend many hours of cursing and headaches trying to force CSS to do something that a very basic HTML table can do in just a few seconds.

axod3• 18 years ago

I believe css3 adds support for better tables. Although when IE might decide to add that is anyones guess.

IsaacSchlueter2• 18 years ago

I believe IE8 beta has support for display:table* properties.

lanceusa• 18 years ago

Great work...I'll bookmark for future reference!

IsaacSchlueter2• 18 years ago

How is it we're still talking about this?

This is a solved problem, and has been for the last 5 years or so. It's not a "Holy Grail" any more.

babul7• 18 years ago

hear hear.

Hexstream3• 18 years ago

What does your comment accomplish that an upmod wouldn't have?

babul7• 18 years ago

I like liquid layouts as I like things that make good use of the real estate they have.

Liquid layouts also tend to print more correctly i.e. without bits chopped-off or missing.

sah• 18 years ago

Isn't this easy to do with tables?

elai• 18 years ago

Why don't we just rename the table tag "grid" and just be honest about what it is. That way, it can either be a layout grid, or a tabular data grid.

The Perfect 3 Column Liquid Layout

Related Stories