UX Magazine

Defining and Informing the Complex Field of User Experience (UX)
Article No. 17 December 16, 2005

One True Layout

Pure CSS-based layouts have come a long way but they still have shortcomings that fail to address certain design goals without compromising the true separation of content and presentation.

In short, the problematic design goals are these:

Total Layout Flexibility: That is, the ability to order columns logically in the source while displaying them in any order desired. For any number of columns.

Equal Height Columns: Or more accurately, equal height columns without having to rely on faux columns.

Vertical placement of elements across grids/columns: Designers face the choice of relying on elements being a particular height, resorting to tables or simply not bothering.

Read the whole article at Position is Everything

ABOUT THE AUTHOR(S)

User Profile

Constantinos is employed as a Creative Director for Tribal DDB Athens. In his ever dwindling spare time he works on the development of UX Magazine and Joblet. You can find out more about him here of follow him on twitter.

Add new comment

Comments

35
45

People come to your senses. Study the proposed "solutions" and dare not to call them ugly HACKS. I would much better throw a couple of TDs and call it a day than this hell.

36
40

Um, the order column logically thing is pretty easy to do already, actually.

41
42

Alex: Any links to a tutorial? We’ll add it to the article. Cheers.

36
45

Alexoid: Position is everything has a pretty good tutorial. The whole article is a good read, actually. I recommend.

39
47

Roshambo: :) Oh-kay.

37
43

good.

36
48

trippy

40
45

I disagree with Alex. It is possible to re-order columns, but only to a limit, which is defined by your HTML containers. And this makes it almost impossible to add new columns. Unless you use absolute-positioning that is..

34
46

I think that reordering, is in fact doing as such and should or should I say can be done. The article makes sence and to the point could conclude the facts are or are not accurate.

38
44

I only want to say comments as “trippy” or “good” are very annoying. Who come to this site to read articles and find interesting comments – and iF that comments are found then the work and brain of the smart people is forgotten… this sites don’t deserve this.

A lot of articles I find is a base to me study :-)

36
43

I would be interested to find out if this site was designed before or after the One True Layout article series was published. The site seems to be a poster child for the programing discussed in the articles.

Overall, a very good read. Let’s all go to our local printshop and print it out for easy reference!

38
50

It’s a great article but the benefits of any order columns, in terms of accessibility, has been questioned recently based on real world usage.

41
41

The core of the problem to me is that the fathers of css were nerds, not designers and they didn’t understand basic designer needs. Vertical centering in a box element? Equal height columns? What’s that for (from a nerd’s point of view)?
I’m all for standards and I’m using xhtml/css on a daily basis, but it never stopped to amuse me how backwards tableless layouts can be sometimes, compared to what was easily achieved with tables.

39
43

Rafalski: I don’t understand the english so good – but I imagine you work with CSS but not as the absolut true or the hard-line to follow. iF it’s so, I agree with you. Sincerly to me the CSS makes you have a grat standard, high quality and excellent browser support but with too limitations. Maybe I’m wrong, ‘cause I’m not CSS guru. As Designer I can tell you (iF you agree) the Graphic Design today demands more posibilities, more layouts, agressive or adventured designs, the CSS coding put margins for that. Today in this new Era of Internet, there are more sites looking as a blog or a newspaper… and other sites really amazing and moderns using .js and .css | About CSS: the and css is my headche.

39
42

“Read the whole article at Position is Everything”

there is a problem about url…

45
45

abdagli: Works fine for me… Are you sure?