So we brought you some great CSS tips to help with accessibility over the weekend, and we discussed how layout helps users get into your page with our look at stumblers and Diggers habits, now its time to introduce the layouts… These are our favourite CSS layout sites and scripts, enjoy
Learning from scratch
Our first site is a step by step (12 pages worth) guide to developing a CSS based site, after all unless you understand the concepts you will never fully be satisified with the other articles. Its set at a good pace for intermediate coders with at least some CSS experience and is worth a read regardless of background or ability 
http://www.subcide.com/tutorials/csslayout/index.aspx Inpatient people may wish to skip to the important bit, hacking your code to work in that other browser.
53 perfect layouts (fixed width)
Its amazing but most web sites have been designed with the same layouts be they tabled or tableless since the start of the web, this does however mean that finding a base point for your designs can be easy and not to painful an experience. So simply select a basic site layout and go.
http://www.code-sucks.com/css%20layouts/fixed-width-css-layouts/ All of these layout are fixed width hold on for some more stretchy ones!
Even more great layouts
If 53 fixed layouts were not enough here are some more both fixed and stretched layouts for ultimate flexibility. These 40 layouts are again completely CSS styled without any tables. 
http://blog.html.it/layoutgala/
Getting it in the Middle
Enough of this handing you it all on the plate! you want to do it yourself and one of the biggest questions that most developers who are coming from tables ask, how do I centre my divs? Well here is the answer or rather several answers, now you can have your site neatly centred particularly useful when combined with a fluid layout. 
http://www.maxdesign.com.au/presentation/center/
The ultimate answer
We held the best till last if you haven’t already bookmark the YUI Yahoo user interface site it is a great resource both for clever javascript and some great CSS resources. One of its best features is the CSS grids and this is our last and best tip, use grids it has several great features including. 
http://developer.yahoo.com/yui/grids/
- Supports fluid-width (100%) layouts.
- Supports easy customization of the width for fixed-width layouts.
- Flexible in response to user initiated font-size adjustments.
- Template columns are source-order independence
http://developer.yahoo.com/yui/grids/ That’s it we are done, go get your layouts sorted, and please no more table based designs you have no excuse now! This post is our attempt at the ProBlogger group project hope you enjoyed it.
67 comments
those 53 fixed width layouts have some pretty bad gaffs. at least some of the ones i looked at have sidebars that occur before content, which is unsemantic, and bad for SEO.
which is highlighted by what a great resource blog.html.it’s layouts are. thanks for highlighting this stuff.
Very good ideas. I use number 12 on the fixed width layout but i have adapted for a fluid layout
Thank you.
Great tips ! this give me ideas to design my web. Thanks
great article. thanks for sharing!
I’ve been using CSS for layouts for quite some time now. I refuse to use tables. This was still a great refresher for me though. “Layoutgala” is something I have bookmarked just for this purpose. Great post.
Thanks, as CSS has been acting weirdly lately with centering and positioning, this is just what I want. I still don’t get the YUI’s relationship with CSS.
I hate CSS, but damn’t I respect it.
very good layout examples I am using one of them when starting create something.
Cool examples. I’ve been having a few problems with getting my CSS pages to work in both ie5, 6 and 7 (and firefox). I’m getting different widths in ie6 – but works fine in firefox. Do you think it’s OK to ignore ie5 and 6 now? Thanks Sophie