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.
This is great. Centering divs was something I was having trouble with yesterday. I’m sure a lot of people will find this post useful.
Good resource here, as a web designer I’m always looking for the best tips and tricks. Of course nothing beats like creating it yourself. Thanks for the links, have a look at my group writing project as well if you get the time.
I’ve always wanted to try my own CSS Layouts but it isnt very easy.
Thank you for these excellent tips! The examples in tips #2 and #3 will come in handy as a starting point for future designs.
Wow, those sites look awesome! Thanks for sharing! I’ve been meaning to start learning about CSS layouts soon, so this is perfect timing.
@Jo I think every web designer who gets into CSS layouts eventual struggles with centring @aswitzer #2, and #3 are great if you just want a quick basic layout but for anything else check out the YUI grid CSS @LearningNerd no time like the present tip number 1 is perfect for you
I’m struggling right now with my website. It’s not online right now because I’m doing some work myself in Dreamweaver but I’m trying to work with the codes instead of the views and it’s rather complicated and I have no patience but I want to learn to do it right. I will have a look at this tonight and hope that it’ll help. It looks like it will.
As a web designer who struggles with CSS, I’m bookmarking this post for later, as although I’ve only skim read it now, I know I’ll be back in the future. Top blogging! http://www.gospelrhys.co.uk
interesting list…thanks
Its great…thanks for sharing. its very helpful.
As soon as I have some spare time, I’ll finish reading all of this. Nice start though, and the links are especially helpful.
how can hele me to fix my website i lost much mony .
This is great! I’ve been using CSS for text now for a couple years, and could never figure out how to do a layout! Thanks guys!
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
Responses to this post: