Top 5 CSS layout tips
May 9, 2007 — Tim NashSo 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.
Subscribe to The Venture Skills Blog by Email
All our Posts are audio subscribed for more information see here, and to access the podcast feed here
This blog is moving soon, make sure you move with us by using our Feedburner RSS feed, if you have used the autodiscovery button in your browser you may need to swap feeds, simply delete the old feed and add, http://feeds.feedburner.com/VentureSkills For a more detailed explanation on feeds and recieving our content in various formats click here
Subscribe to our Feedburner RSS Today!
Subscribe to our Odiogo Audio Feed
May 10, 2007 at 6:59 am
[...] Venture Skills Blog Top 5 CSS layout tips « The Venture Skills Blog Top 5 CSS layout tips « a great guide to CSS layout and links to some awesome [...]
May 10, 2007 at 9:38 am
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.
May 10, 2007 at 10:20 am
[...] Top 5 CSS layout tips by Tim Nash [...]
May 10, 2007 at 10:34 am
[...] Top 5 CSS layout tips by Tim Nash [...]
May 10, 2007 at 12:28 pm
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.
May 10, 2007 at 12:59 pm
[...] Top 5 CSS layout tips by Tim Nash [...]
May 10, 2007 at 1:49 pm
[...] Top 5 CSS layout tips [...]
May 10, 2007 at 2:48 pm
[...] Top 5 CSS layout tips by Tim Nash [...]
May 10, 2007 at 4:28 pm
I’ve always wanted to try my own CSS Layouts but it isnt very easy.
May 10, 2007 at 4:44 pm
[...] Top 5 CSS Layout Tips [...]
May 10, 2007 at 4:45 pm
Thank you for these excellent tips! The examples in tips #2 and #3 will come in handy as a starting point for future designs.
May 10, 2007 at 4:55 pm
[...] Top 5 CSS layout tips by Tim Nash [...]
May 10, 2007 at 4:59 pm
Wow, those sites look awesome! Thanks for sharing! I’ve been meaning to start learning about CSS layouts soon, so this is perfect timing.
May 10, 2007 at 5:28 pm
@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
May 10, 2007 at 6:30 pm
[...] Top 5 CSS layout tips by Tim Nash [...]
May 10, 2007 at 8:41 pm
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.
May 10, 2007 at 9:33 pm
[...] Top 5 CSS layout tips by Tim Nash [...]
May 10, 2007 at 9:51 pm
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
May 10, 2007 at 9:57 pm
interesting list…thanks
May 10, 2007 at 10:12 pm
[...] Top 5 CSS layout tips by Tim Nash [...]
May 11, 2007 at 12:58 am
[...] Top 5 CSS layout tips So we brought you some great CSS tips to help with accessibility over the weekend, and we discussed how layout […] [...]
May 11, 2007 at 1:06 am
[...] Venture Skills Blog put out this artical as a submission for the Top 5 ProBlogger Group Project. It’s a great article that outlines five of the best CSS How-To sites that they could find. The list looks like this [...]
May 11, 2007 at 8:48 am
Its great…thanks for sharing. its very helpful.
May 11, 2007 at 10:10 am
[...] Post con numerosi link su layout CSS [...]
May 11, 2007 at 7:38 pm
[...] Top 5 CSS layout tips by Tim Nash [...]
May 11, 2007 at 8:10 pm
[...] Top 5 CSS layout tips [...]
May 12, 2007 at 12:21 am
[...] The Venture Skills Blog Top 5 CSS layout tips « (tags: css webdesign reference design) [...]
May 12, 2007 at 12:35 am
[...] The Venture Skills Blog Top 5 CSS layout tips « (tags: css layout tips) [...]
May 12, 2007 at 2:21 am
[...] to this blog entry from which the title was taken, I think I could aim to actually start somewhere. While I’ve [...]
May 12, 2007 at 4:32 am
As soon as I have some spare time, I’ll finish reading all of this. Nice start though, and the links are especially helpful.
May 12, 2007 at 7:51 am
[...] Top 5 CSS layout tips by Tim Nash [...]
May 12, 2007 at 8:12 am
[...] Top 5 CSS layout tips by Tim Nash [...]
May 12, 2007 at 11:51 am
[...] Top 5 CSS (Cascading Style Sheets) layout tips by Tim Nash [...]
May 12, 2007 at 12:44 pm
[...] Top 5 CSS layout tips by Tim Nash [...]
May 12, 2007 at 7:21 pm
[...] Top 5 CSS layout tips by Tim Nash [...]
May 13, 2007 at 12:50 am
[...] Top 5 CSS layout tips by Tim Nash [...]
May 13, 2007 at 2:38 am
[...] Top 5 CSS layout tips by Tim Nash [...]
May 13, 2007 at 6:03 am
[...] Top 5 CSS layout tips by Tim Nash [...]
May 13, 2007 at 7:36 am
[...] Top 5 CSS layout tips by Tim Nash [...]
May 13, 2007 at 3:54 pm
[...] Top 5 CSS layout tips by Tim Nash [...]
May 13, 2007 at 4:49 pm
[...] Top 5 CSS layout tips by Tim Nash [...]
May 13, 2007 at 10:42 pm
[...] Website layouts (tags: Designs) [...]
May 14, 2007 at 1:47 am
[...] Top 5 CSS layout tips by Tim Nash [...]
May 14, 2007 at 1:47 am
[...] Top 5 CSS layout tips by Tim Nash [...]
May 14, 2007 at 6:03 am
how can hele me to fix my website
i lost much mony .
May 14, 2007 at 1:37 pm
[...] Top 5 CSS layout tips by Tim Nash [...]
May 14, 2007 at 3:28 pm
[...] Top 5 CSS layout tips by Tim Nash [...]
May 14, 2007 at 5:26 pm
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!
May 15, 2007 at 4:02 am
[...] Top 5 CSS layout tips by Tim Nash [...]
May 16, 2007 at 10:33 am
[...] Top 5 CSS layout tips by Tim Nash [...]
May 17, 2007 at 1:24 pm
[...] The Venture Skills Blog Top 5 CSS layout tips « (tags: design programming css tips) [...]
May 25, 2007 at 4:28 pm
[...] Tutorial CSS [...]
June 5, 2007 at 5:49 pm
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.
June 5, 2007 at 5:50 pm
which is highlighted by what a great resource blog.html.it’s layouts are. thanks for highlighting this stuff.
June 28, 2007 at 9:43 pm
Very good ideas.
I use number 12 on the fixed width layout but i have adapted for a fluid layout
Thank you.
July 10, 2007 at 9:54 pm
[...] an easy thing to do for others either! I was pleased to see that the solution recommended on the Venture Skills blog was the same one I came to (by trial and error). The whole exercise was made much easier by CSSEdit [...]
July 15, 2007 at 6:22 pm
Great tips ! this give me ideas to design my web.
Thanks
August 3, 2007 at 10:43 am
[...] Top 5 CSS layout tips by Tim Nash [...]
August 18, 2007 at 10:55 am
[...] Top 5 CSS layout tips by Tim Nash [...]
August 30, 2007 at 5:26 am
great article. thanks for sharing!
September 3, 2007 at 3:50 pm
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.
October 22, 2007 at 10:33 pm
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.
October 25, 2007 at 11:26 pm
I hate CSS, but damn’t I respect it.
October 26, 2007 at 10:04 am
[...] Posts Want to create a site like Digg with no programming?Top 5 CSS layout tipsCCK & Views the ultimate combination - part 1CCK & Views the ultimate combination - part [...]
November 3, 2007 at 9:54 am
very good layout examples I am using one of them when starting create something.
November 5, 2007 at 12:59 pm
[...] Top 5 CSS layout tips by Tim Nash [...]
November 10, 2007 at 8:08 pm
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