Example CSS Layouts

CSS Layouts

Some notes about the following layouts.

These layouts do not take into account borders or padding. Adding those things does make our task a little more complicated but it isn’t hard if you understand what is below.

There will also be some slight discrepancies in some of these layouts between Firefox and IE and other browsers.

CSS Layout Ideas

1 COL: Layout with a single column

With these layouts all of the header, content etc. goes in one column.

Fixed Width

This is a simple layout. The div tags do most of the work of separating the sections. Basically all you have to do is to set the width and margins on the wrapper and to then style the heights etc. how you need them.

Fluid Width

With a fluid width design as the user makes the page wider and narrower the width of the design will grow and shrink accordinglyThe only difference with the fluid width is that you set the wrapper margins to percentages instead of auto and you don’t set the width of the wrapper.

One (1) Column Fixed Width

One (1) Column Fluid Width

2 COL: Layouts with two columns

In these layouts there are two columns in the middle of the page. The header, footer, and navigation are still one column and fill the entire width.

There are three basic ways to achieve two columns.

Fixed Width Floated

One way is to float one column to the left and the other to the right. When you just do this in a basic way you get the problem that each column is only as tall as the content it contains. This makes the colums unequal in length most of the time. The trick to make it look like three columns is to add in an extra div tag:

<div id="clearColumns"></div>

Clear the div so it comes beneath any floated element. And then set the background of the wrapper to be the same as the shorter column.

Two (2) Column Fixed Width Floated

Two (2) Column Fixed Width Floated – equal column appearance

Fixed Width Float Plus Margin

Another other way is to just float one column and then put a margin on the second column to make sure it doesn’t overlap the first column.

Here we have the same problem of unequal column lengths and solve it in the same way as well.

Two (2) Column Fixed Width Float plus Margin

Two (2) Column Fixed Width Float plus margin – equal column appearance

Fluid Width

A third way is to make the main column have a fluid width. Like in the one column example above we take out the set width on the page and set the page margins to %. Then we also take out the width on the second column (content). This allows the content to grow and shrink with the page.

Two (2) Columns Fluid Width

Two (2) Column Fluid Width – equal column appearance

3 COL: Layouts with three columns

The three column layouts are extensions to the ideas in the two column layouts.

Fixed Width Floated

With the floating method you float all three columns to the left making sure you set the widths so they add up to the total width of the page

Three (3) Column Fixed Width Floated

Fixed Width Float Plus Margin

For the float plus margin method you float columns 1 and 3 and then set both the left and right margins of the middle column, column 2, so that it doesn’t overlap columns 1 or 3.

Three (3) Column Fixed Width Float plus Margin

Fluid Width Float Plus Margin

For the fluid width you can basically just use the Fixed Width Float Plus Margin and then change it so that there is no width on the page, the margins are in % and the content doesn’t have a width as well. Basically the same thing you did in two column fluid width.

Three (3) Column Fluid Width

With the three column layout getting the appearance of equal columns is more difficult so I am leaving it out for now. To get more info on this, see the resources below.

Resources on the Web

There are a lot of resources here. Look around and feel free to use pieces you need from them. Remember to always give credit in your comments when you get code from one of these sites.

These are a bunch of examples of using faux columns (background image to simulate columns). Includes 2, 3 and 4 column layouts.

Fixed width two column and three column layouts. These pretty much all use floats to make the columns.

Two column and three column layouts. This is one of the first sites to show layouts.

This article talks about the things you need to know to understand CSS-based layouts. We’ve talked about most of this but it is good to see it again and they provide some more resources.

This article goes back to what we talked about with ems and applies it to the layout as well. As a result you get what is called an elastic layout. This is basically a fixed width layout that can change widths as the user makes the text larger. The article itself is an example of a 3 column elastic layout.

This is a great tutorial that covers floats in a number of situations from layouts like we are doing today, to inline lists, to aligning thumbnail images for picture galleries. It also covers the difference between static, float, relative, absolute and fixed positioning.

Getting the columns to look equal height in a 3 column layout is a little tricky without using faux columns, so I’m not showing it today. However this article tells you how.

This is actually an entire chapter from a book. It takes you through from start to finish constructing a page that has a two column layout. The article is long but detailed and thorough. Click the print view at the top to see it all on one page.

Post a Comment

Your email is never published nor shared. Required fields are marked *


You may use these HTML tags and attributes <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>