The Perfect 3 Column Liquid Layout
matthewjamestaylor.com
matthewjamestaylor.com
This is a solved problem, and has been for the last 5 years or so. It's not a "Holy Grail" any more.
...also, in the same vein one can ask what your comment accomplishes that a downmod would't have? :)
It'd be a mess if not only a lot of people left purely opiniative (?) comments because they don't have time to elaborate but this was also generally deemed good behavior.
If you were about to post insightful commentary later couldn't it wait (in fact it did wait since your in-the-meantime comment was clearly no substitute)? Especially since others have expressed what you would have.
"...also, in the same vein one can ask what your comment accomplishes that a downmod would't have? :)"
I find it surprising that you'd ask that just after clarifying your motives. Would you have posted that answer if I had just downmodded you?...
Lastly, if you/anyone just downmoded the comment I wouldn't know who/why so would not have answered like that. Instead I would have discussed points/issues/reasons, as I generally try to do in other posts I make.
Does it strike anyone else that this is a failing of CSS as a technology?
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.
A nice scaling toolkit would let you intelligently use all that width. You might be able to change how things flow, change how much content shows in various elements, etc, etc. Making wider columns usually sucks.
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.
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.
That CSS layout leaves a bit more up to the user agent. The primary content appears first, if there's not space to position each column next to the primary content, it drops down below.
Tables also makes it harder for crawlers/interpreters to understand the page as content may not be hierarchically correct due to layout issues, etc.
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.
True, using tables for layout in some sites is much simpler than CSS but people who do that usually do so today because they do not know how to do it in CSS properly.
Either way, all is fine, until they start using tables within said layouts (e.g. for number sets or even more mutli-columning in subsections) and things start to get problematic. This is especially evident when they try to use the content in various sites or try to change formatting for cross-browser related issues (often best solved by having base style sheets for various browsers).
Just my experience and thoughts, ultimately use whatever is best for you, and you are comfortable with :)
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.
They all share the base reasons, which is the seperation of concerns, which ultimately leads to systems/solutions being easier to develop/maintain/extend/change.
It's presented as this cardinal rule: the web designer shalt not mix layout and content, nor shall the designer obfuscate thy code with any table, less it is presented in the form of a database view. (+1 for dramatic license.)
And I would be all for that, IF the development platform that we were all forced to use actually supported that in a helpful way.
But, it doesn't. Give me a little time, and I'm pretty sure I can come up with at least one presentational trick that is absolutely, positively impossible with cross-browser CSS -- and I'll even allow you to use all the CSS hacks you can come up with. But, the very same presentational effect is a piece of cake with a single HTML table.
MVC, or MVP, are sound ideas ... where they're made practical by the development environment. However, it's possible to write perfectly easy-to-maintain code for a business without strictly following those models, and if you're dealing with some framework or development environment that makes the MVC model difficult, then I think it's foolhardy not to make some practical considerations in lieu of this stainless ideal.
EDIT: I just remembered the CSS layout that I wanted so badly and never could figure out. It drove me nuts, but this was a couple of years ago and somebody might have figured it out since. All I wanted was two columns; first was completely liquid, the second was liquid with a minimum width; auto scroll bars (but not displayed unless necessary); and -- the part I couldn't get to work -- a single line border drawn between the two. For some reason, no matter what I tried, introducing that line border caused one browser or another to add scrollbars, or draw it short, or something else idiotic. Three days of Googling, CSS hackery, and other nonsense later, and I wrote a table in just about a minute that did the job fine.
For example, let's say the HTML guy makes a page where product data should go. What exactly that product data is, he does not know when he's making the page. It doesn't matter, he can just make the HTML and fill it up with some Lorum Ipsum text. Then when it's time to put the actual product data in, this will take ten minutes at most for the content people to do if the HTML is clean and minimalist, while it will take a few hours if it's nested tables or worse (Dreamweaver generated crap or somesuch).
In the end, the cost of having someone do HTML properly, meaning using HTML for content only and dealing with presentation in CSS, which the content people will never see, offsets the costs of having developers wade through messy HTML every time they need to change something.
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.
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.
There are times when I find I just want to focus on a single item and block everything else out, which forces me to either maximize Safari, or close down all my applications.
I don't care for Spaces too much right now, it's kind of buggy with Photoshop/Illustrator.
screen one: rotated vertical with code
screen two: horizontal with command line and the app splitting horizontal real estate.
--------------------------
screen one: full-sized game
screen two: web browser and IM client
There's a very simple workaround. Reference a transparent, one pixel image and specify the desired minimum width.
- 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.
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.
Liquid layouts also tend to print more correctly i.e. without bits chopped-off or missing.