ARTICLE NO. 17    December 16, 2005

One True Layout

by Constantinos Demetriadis
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)

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.

View Profile

Comments

Add a new comment

Because of problems with spam comments, HTML in comments is not permitted. URLs are allowed, but they will not be rendered as clickable links.
May 24, 2010
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.
December 19, 2005
Um, the order column logically thing is pretty easy to do already, actually.
December 20, 2005
Alex: Any links to a tutorial? We’ll add it to the article. Cheers.
December 20, 2005
Alexoid: Position is everything has a pretty good tutorial. The whole article is a good read, actually. I recommend.
December 20, 2005
Roshambo: :) Oh-kay.
January 03, 2006
good.
January 08, 2006
trippy
January 23, 2006
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..
January 31, 2006
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.
February 02, 2006
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 :-)
February 03, 2006
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!
February 04, 2006
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.
February 04, 2006
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.
February 05, 2006
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.
February 07, 2006
“Read the whole article at Position is Everything” there is a problem about url…
February 07, 2006
abdagli: Works fine for me… Are you sure?
December 16, 2005
abdagli: Works fine for me… Are you sure?
December 16, 2005
“Read the whole article at Position is Everything” there is a problem about url…
December 16, 2005
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.
December 16, 2005
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.
December 16, 2005
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.
December 16, 2005
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!
December 16, 2005
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 :-)
December 16, 2005
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.
December 16, 2005
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..