CSS Layouts: 40+ Tutorials, Tips, Demos and Best Practices

July 28th, 2008

The main idea behind CSS-based layouts is offering more flexibility and enhancing the visual experience of visitors. Some important tips and related key-factors can help to learn basics and keep essential techniques in mind. And this is what this article is all about. Finding the perfect Layout that have Total Flexibility, Equal Height Columns and just works fine.

So we’ve decided to take a deep look at articles about CSS-based layouts and the result was a list of 40 tutorials, resources and best practices offering gorgeous and valid CSS-based Layouts.

You might be interested to check other CSS related posts:

CSS Layout Tutorials

1-Three column fixed layout structure using CSS– This post explains how to realize an HTML/CSS basic structure to design a simple three column fixed page layout with standard elements (logo top bar, navigation bar, text stage, center column for post categories and right column to insert Google AdSense 120X600 ads), to use in your projects.

css layouts

2-Design page layout using CSS– How to design page’s layout for your site using a css file.

css layouts

3-How To Create a Horizontally Scrolling Site– Different techniques for creating horizontally scrolling layouts.

css layouts

4-Super Simple Two Column Layout– Different techniques for creating horizontally scrolling layouts.

css layouts

5-Simple 2 column CSS layout– This is a tutorial on how to use CSS to create a simple two column layout. The layout consists of a header, a horizontal navigation bar, a main content column, a sidebar, and a footer. It is also horizontally centered in the browser window.

css layouts

6-The holy grail layout – 3 columns and a lot less problems – This is a article discuss the three columns – two fixed-width sidebars and a fluid center column, all while keeping the markup clean and semantic, and most importantly well structured.

css layouts

7-CSS Centering 101– How to center a fixed-width layout using CSS

  <div id="container">
    ...entire layout goes here...

Using CSS, the following two rules force whatever is contained within #container to be centered:

body {
  text-align: center;
#container {
  margin: 0 auto;
  width: xxxpx;
  text-align: left;

8-Creating a CSS layout from scratch– This guide will attempt to take you step by step, through the process of creating a fully functioning CSS layout.

css layouts

9-Multi-Column Layouts Climb Out of the Box– Multiple columns, equal column heights, fixed or liquid center column, clean markup, and CSS.

css layouts

10- In search of the One True Layout– Total Layout Flexibility, Equal Height Columns, Vertical placement of elements across grids/columns. This article shows how to achieve each of these goals, and then how to combine them, creating what could be called the One True Layout

css layouts

11-From PSD to HTML, Building a Set of Website Designs Step by Step-The entire process of getting from Photoshop to completed HTML.

css layouts

12- 5 Tips for coding xhtml/css layouts– These are few tips that could help you out in the transition from table-based web design to standards compliant css based layouts.

13-Designing a CSS based template– This is the start of a step-by-step based tutorial about how to create a CSS based template page. This will be a tutorial consisting of several parts: part 1 covers the creation of the navigation buttons in Photoshop CS*, the 2nd part will be the creation of the background, next on the list is the header and layout of the page and the final part will be the implementation in CSS and XHTML.

css layouts

14-Breaking Out of the Box With CSS Layouts– If you understand how the grid works, you can fracture or abstract that grid to make your layout more dynamic and interesting. In achieving this goal (while supporting flexibility and maintainability), CSS designs have so much more to offer than table-based layouts. Jina Bolton explains how to acheive this goal.

css layouts

15-Advanced CSS Layouts: Step by Step– The ultimate goal of this tutorial is to create a CSS layout that exactly resembles the layout made with tables and also behaves well with small window sizes and large fonts.

css layouts

16-6 Keys to Understanding Modern CSS-based Layouts
These are the six things that will help people understand CSS-based layouts: Box Model, Floated Columns, Sizing Using Ems, Image Replacement, Floated Navigation and Sprites.

17-Are you making these common blog layout mistakes?
Discussing 4 mistakes in basic blog layout are all too common and all too easy to fix.

18-Page Layout
A practical guide for positioing and floating elements in a CSS page layout.

19-Site in an Hour– Making Simple Work of Complex CSS Layouts

css layouts

The best Layouts Resources

Most of these demonstrations can be used without asking for permission. However, some will require email approval first. Just check each site for the copyright requirements before use.

20-Sample CSS Page Layouts– Here are a range of CSS page layouts, including 2 column and 3 column layouts.

css layouts

21-The Perfect 3 Column Liquid Layout (Percentage widths)– No CSS hacks. SEO friendly. No Images. No JavaScript. Cross-browser & iPhone compatible.

css layouts


css layouts

23-IM Layouts– IM Layouts is a simple CSS layout system. IM Layouts offer full Grade-A browser support.

css layouts

24-CSSplay – CSS Layout Listing

css layouts

25-Layoutgala – Getting the maximum number of layouts based on the same markup, each with valid CSS and HTML, without hacks nor workaround and a good cross-browser compatibility. The result is a set of 40 layouts.

css layouts

26-Glish– Many useful cross-browser CSS layout techniques

css layouts

27-Thenoodleincident– CSS Boxes going from a simple single box, through 3 columns with a full width top box, all with variations.

css layouts

28-The Layout Reservoir– Many useful CSS layout techniques

css layouts

29-The only CSS layout you need– In this article you are presented to ten different layouts with example pages, all based on the same HTML.

css layouts

30-Yet Another Multicolumn Layout– is an (X)HTML/CSS framework for creating modern and flexible floated layouts. The structure is extremely versatile in its programming and absolutely accessible for end users.

  • Download YAML here.

31-Liquid Designs– Liquid Designs is a gallery of websites designed with liquid layouts using XHTML and CSS

Best Practices

Also if you are looking for inspiration for CSS-based layout designs, you will find a nice collection of websites below. These sites show how css layouts can be applied on various type of sites. Check out how the layout can be divided into 2 columns, 3 columns, a mixture of narrow and wide columns.


css layouts


css layouts

34-OS communications informatiques

css layouts


css layouts


css layouts


css layouts


css layouts


css layouts


css layouts

The jungle is alive: Be it a collaboration between two or more authors or an article by an author not contributing regularly. In these cases you find the Noupe Editorial Team as the ones who made it. Guest authors get their own little bio boxes below the article, so watch out for these.


69 comments for „CSS Layouts: 40+ Tutorials, Tips, Demos and Best Practices
  1. David Hellmann on July 28th, 2008 at 3:53 am

    Nice overview! And thx for post the MBW Page!

  2. Mohsen` on July 28th, 2008 at 4:11 am
  3. Adrian | Rubiqube on July 28th, 2008 at 5:37 am

    Great selection! I’m sure these links will come in handy. ;)

  4. Lasha on July 28th, 2008 at 7:16 am

    Great list of resources. These will definitely come in handy when I am working on websites. Thanks!

  5. acms on July 28th, 2008 at 7:33 am

    Thanks, great resource.

  6. coolactionfigure on July 28th, 2008 at 8:49 am

    great checklist dude! keep shared.

  7. PhilFreelance-Web on July 28th, 2008 at 9:02 am

    This is a good collection for css layout!

  8. antipix on July 28th, 2008 at 12:39 pm

    i’m always surprised when you find french website…
    were you lost ?

  9. bangbouh on July 28th, 2008 at 4:37 pm

    Very nice collection. Thanks!

  10. Jim Dolittle on July 28th, 2008 at 5:19 pm

    Excellent! Nice tutorial. thanks for the examples.


  11. Timothy Long on July 28th, 2008 at 5:43 pm

    you guys are doing what i wish smashing magazine still did: creating ultra-useful lists and best of’s. keep it up.

  12. SoLinkable on July 28th, 2008 at 6:10 pm

    Excellent collection. CSS can sometimes be difficult to just jump into without any prior knowledge. Its nice to have a handy resource to use.

  13. United Voices on July 28th, 2008 at 6:39 pm

    I’m always on a lookout for to increase my CSS experience and resources. Thanks for this article. Definitely will be of quite a help for me.

  14. Sangesh on July 28th, 2008 at 6:44 pm

    Very nice compilation of resources. Thank you.

  15. Pavan Kumar on July 28th, 2008 at 7:16 pm

    Wow! A great tut, stumbled…

  16. lokendra on July 28th, 2008 at 9:33 pm

    i like it it’s too fine

  17. Gaurav Chandra on July 28th, 2008 at 9:38 pm

    Even though I am already into web designing for quite a long time, this information is still helpful upto a large extent.

  18. Richard E. Poulin III on July 29th, 2008 at 1:26 am

    More great stuff! Always love reading your articles!

  19. thoma on July 29th, 2008 at 2:46 am

    Very useful list….

  20. lil.D on July 29th, 2008 at 2:59 am

    Thanks a lot for your efforts, such a useful post! and nice examples

  21. mal on July 29th, 2008 at 3:14 am

    Just bookmarked it.
    Good list, but some pieces are old and have been on many lits like these before.

  22. Todd Loren Sinclair on July 29th, 2008 at 3:15 am

    Thanks for the great tips!

  23. stelt on July 29th, 2008 at 3:35 am

    You forgot how to use CSS on SVG

  24. Twist Design on July 29th, 2008 at 4:26 am

    Great resource as usual!! top drawer.

  25. CheStyle on July 29th, 2008 at 4:33 am

    Impressive collection. Bookmarked. Keep up the good job.

  26. JSHAW on July 29th, 2008 at 7:32 am

    Awesome Thansk!

  27. josh on July 29th, 2008 at 8:21 pm

    great roundup of layouts and a superb job of explaining by drawing on white paper.

    well done

  28. Max | Design Shard on July 30th, 2008 at 4:40 am

    verry good collection, could come in handy.
    Max | Design Shard

  29. on July 30th, 2008 at 11:16 pm

    Excelent. You should take a look here also:
    Thank you

  30. Andy Gongea on July 31st, 2008 at 3:19 am

    Nice collection. Kudos!

  31. Htoo Tay Zar on July 31st, 2008 at 7:49 am

    Another Great CSS Collection. Really Useful for CSS newbies like me. Thanks a lot

  32. bangbouh on July 31st, 2008 at 1:28 pm

    Well put together list. Thanks!

  33. Rich on August 2nd, 2008 at 9:00 am

    Great Tips! Designers looking for an FTP replacement tool may have interest in:

  34. Fatih Güner on August 3rd, 2008 at 8:29 am

    this is a very good list, thanks for that

  35. Eneza on August 4th, 2008 at 6:58 pm

    Truly, Beautiful list. I will use this… The Bright Creative is quite interesting!

  36. Your Learning Tube on August 5th, 2008 at 1:11 am

    Nice tutorials, perhaps you could post them on Yobler as well

  37. zacheos on August 7th, 2008 at 11:26 am

    You forgot about mine!

  38. Abe on August 14th, 2008 at 2:31 pm

    Wow…. Great list, thanks.
    Bookmarked it for later :)

  39. Create Sean on August 14th, 2008 at 4:02 pm

    Wow! fantastic list, lots of reading material and inspiration.

  40. Chris on August 29th, 2008 at 3:18 am

    Thank your for this useful selection. I`ll bookmarked it. :)

  41. CyeberFox on November 11th, 2008 at 10:00 pm

    Great resource.
    Many Thanks!

  42. Rene on November 18th, 2008 at 12:25 am

    Some very interesting layouts, I’m sure they will come in handy.

  43. thinkflick on November 26th, 2008 at 2:10 am

    Thanks for sharing. You are really working hard for us.

  44. oktata on November 21st, 2009 at 12:28 pm


  45. gratis webseite erstellen on April 7th, 2010 at 5:40 am

    These really helped me to build my homepage, I can really appreciated if people take some time and write a usefull tutorial.

  46. Sreedhar Adigopula on May 12th, 2010 at 8:42 pm

    Good Tips for CSS

  47. Oscar on August 2nd, 2010 at 2:00 pm

    I had to redesign a client website. I recycled the CSS & XHTML and made things so much easier and effecient.

  48. Louise Lambert on September 28th, 2010 at 5:44 pm

    Found this site on Ask Jeeves and I’ll be back .

  49. david on October 23rd, 2010 at 4:26 pm

    nice tutorial it help me but i have a lot of question to make web dynamic…?

  50. Brock Dyll on November 5th, 2010 at 10:13 pm

    This is actually one of the improved reports with those who I have read on the following subject lately. Fantastic function.

  51. html5 on January 11th, 2011 at 6:58 am

    useful info. thanks..soon:)

  52. Chandu on March 7th, 2011 at 6:34 am

    Good dude…..plz post total css tutorials

  53. Rodrick Mcquiston on April 10th, 2011 at 4:54 am

    I had been therefore discouraged beacuse I couldn`t solve this problem. Then i found your site in the search engines as well as problem is resolved. Thanks!

  54. Max on April 11th, 2011 at 11:20 am

    these are really very gud designs… :)

  55. Sree on June 18th, 2011 at 2:26 pm

    Great! Very useful…Thanks a lot

  56. sachin sharma on August 17th, 2011 at 3:19 pm

    awesome…..really very nice man…

  57. ric monteverde on September 5th, 2011 at 5:43 am

    informative and really helpfull, keep it up!

  58. Dennis savai on October 5th, 2011 at 7:42 am

    nice and simple layouts that are easy to understand.

  59. Beau on November 30th, 2011 at 3:58 pm

    Nice tutorials. I love the liquid layouts. Very useful!

  60. Henry on February 9th, 2012 at 8:22 am

    Good collection!! SEO optimized layouts will be one step ahead.. :)

  61. Daniyal on February 20th, 2012 at 6:07 pm

    hmmm…good website…i should definitely try some of these technique

  62. Mark on March 26th, 2012 at 5:18 pm

    Awesome resource. Thanks.

  63. bennix on April 20th, 2012 at 4:46 pm

    Excellent this is what I am looking for.Thanks a lot…:)

  64. Paul on June 3rd, 2012 at 10:17 pm

    Great! This is what i am looking for.
    Now layouts in css is much more easy for me :)

  65. jitendra on September 28th, 2012 at 8:58 am

    Thanx a lot…It’s very useful..

  66. ISHRAT on October 24th, 2012 at 6:37 am

    it’s very helpful ………………thanks a lot…. :)

  67. raj on November 17th, 2012 at 3:07 pm

    Each and every step in this css layout tutorial,you setup a live example this is amazing tutorial for all web designers specially super like tutorial for newbie designers.Thank you very much for sharing.

  68. abalijay on February 5th, 2013 at 12:43 pm

    I appreciate! its so wonderful…

  69. Andor Nagy on February 7th, 2013 at 10:25 pm

    Great templates! I’m deffinatly going to use them for my future works!