Flexible CSS Layout

David Neal pointed me at this article:

http://www.positioniseverything.net/articles/onetruelayout/

and this example page:

http://www.fu2k.org/alex/css/onetruelayout/example/interactive

Alex Robinson really knows his css and the quirks of popular browsers.

Although I already had a 3 column css layout working I am seeing much more possibilities with this approach. I'll be experimenting with this soon.

Comments

re: Flexible CSS Layout

Monday, February 27, 2006 3:42:04 AM
I think pure css layout would be awesome.  It would also quiet all those XML purests who decided that Tables were obosolete when XML support in browsers came out.  I still think a few tables here and there can't hurt but having it controlled in a more fluid template is great.  I have always liked http://www.csszengarden.com/ too.  One of these days I'll quit letting firework/photoshop slices determine my table layout and convert to CSS, not today though.
Joe

re: Flexible CSS Layout

Monday, February 27, 2006 6:28:11 AM
Yes, CSS tableless layout is the way to go. I already am using CSS layout on this site and on joeaudette.com and have converted several of the included skins in svn to tableless layout.

There are places where its still ok to use tables such as in displaying tabular data which is exactly what tables are for. They are definitely not obsolete.

The tables and markup that Daniel was remarking/complaining on in my other blog was the tables rendered by the ASP.NET menu control. The layout that I have control over is mostly using CSS and no tables but I don't have control over the rendering of the built in server controls. It may be possible at some point to develop a menu control that doesn't use tables but I am not overly concerned about it at this point. I do agree with him that it is less than ideal for the menu to render as nested tables though.

The css layout approach I'm currently using floats the left and right columns allowing the center column to sit in the middle, you just have to have the margins on the center div set to avoid the floated ones. I have several css classes configured and I set the class on the center depending on whether there is any content in the left and right sides, if not I adjust the margin accordingly by setting the css class.

In this approach the left and right side divs are located before the center div in the source of the markup. The article David referred me to allows the center div to be first which has some advantages in terms of accessibility and search engines.

Cheers,

Joe
Comments are closed on this post.