Is There a Business Reason for Striving for Pure CSS Layout

Is there a simple 3-column, pure CSS layout?

There is no such thing as "simple" when you talk about CSS.

But there is a simple solution that is cross browser, degrades gracefully and is fully HTML and CSS compliant: use a table with three columns.

Reasoning: DIVs are not meant to have the same dynamic height. Therefore, CSS has no support for this. If you need a block element which makes sure that its children have the same height, then that's what tables are for.

[EDIT] Sorry to offend all you CSS fanatics out there but, frankly, when something is not designed to do something and you abuse it, and it doesn't work, please stop complaining, ok? A DIV is not a TABLE and can't be used as one without relying on hacks.

[EDIT2] As was said already in various places, the reason not to use tables for layout was that, in early times, tables were the only design element and that lead to HTML which had dozens of nested tables. That's bad. But that doesn't mean you must not use a single table to put everything in place and then rely on CSS to make the stuff inside look right.

A brain is like a parachute: It's nice to have but only useful when it's open.

CSS layout without fixed width

You are essentially right. There is nothing really wrong with using tables for layout as long as, for accessibility, the order of the cells is appropriate for the page. I personally find fixed-width a much worse degradation of usability than tables-for-layout.

When you do use tables for layout, be sure to use the styles width: 100%; table-layout: fixed (and <col> with a styled width) so that browsers can lay the table out correctly from the start (which fixes one of the usability problems table layouts had), and so that you're not reliant on IE's rather poor auto-layout width-guessing.

Whilst I certainly prefer CSS for layout wherever possible, and most simple site layouts can be reasonably achieved using only CSS (especially now IE5 and its Quirky Box Model is gone), there are some cases where CSS can't hack it and tables can. A common case is complex fluid-width forms.

The most significant problem is the lack of ability to say things like width: 100%-10em to get a column that's the width of the viewport minus a fixed size for another column. For the simple cases you can get around this with margins and a wrapper div, but once you start re-ordering the elements on your page and adding multiple wrappers just to get the CSS layout to work, you're already mixing up the presentation with the content: not really so very different from tables.

In the worst case you end up with those silly ‘CSS frameworks’ that require you to use nesting and fixed class names to completely specify the layout inside the markup itself. This is no better than tables at all; I find it absolutely hilarious that this hopeless throwback to the bad old days is considered a trendy cutting-edge Web 2.0 technique.

CSS3 is working on some interesting alternatives to current Positioning options that may one day deliver on the promise of total markup and layout separation. But that's a long way off today.

Is CSS layout really as delicate as it seems to be?

I honestly think this layout has been made pretty badly. The width of the elements seems to change where they appear on the page, and they're all need to be pixel perfect for everything to be centred.

For some bizarre reason the whole page has been placed inside the div element marked 'header'... This doesn't make much semantic sense for a start.

However, it seems if you decrease the width of every element which has one, then everything does get smaller, and nothing should disappear.

I would recommend looking at some other more sensible layouts, since I don't think this is a very good way of attaining that style -- as you've said, it's brittle. Have you tried using the extension Firebug for firefox? It allows you to make on-the-fly changes to the css, and see how it affects the style, which will help you learn fast.

pure css layout for a web application?

The chances are that there are CSS techniques to achieve what you want, but they may not be obvious if using CSS for complex layouts is new to you.

In your case, to 'get it done', I would recommend a hybrid type layout, and not feel bad about using a table to layout the pieces of the application that require those particular behaviours.

If it is particularly complex and difficult than a table might be the best and simplest approach even for the CSS expert.

---

Related Topics