The Last Guide to CSS Layout You’ll Ever Need

Posted by Pete - 04/12/08 at 03:12:40 pm


Quite a lot of time and effort has gone into this. As such, if you like it, send it to someone who might find it useful. Share the love.

Also, you may want to use to table of contents to navigate it if you’re after a specific piece of information.

Many thanks to Smashing and Matt Inman, as well as everyone who ever took the time to answer my questions.

Table of Contents

Layout

  1. Fixed or Fluid?
  2. W-H-N-M-F
  3. Two Column - Fixed
  4. Three Column - Fixed
  5. Fluid Layouts
  6. Equal Height Columns

Fixed or Fluid?

The first thing to decide when you come to convert your design to XHTML and CSS is whether you’re going to make it fixed or fluid. Nowadays, it’s increasingly rare to find fluid-based layouts, simply because they reduce the control you have over what the person is actually seeing (due to it all being based on their browser size).

In the rare occasions where fluid widths are used, you’re almost certain to find min-width and max-width properties, so that you don’t end up with content blocks that are either 10 or 150 characters to a line.

Either way, mathematically speaking, your best choices for widths are 840px, 900px and 960px, as these divide best (840 has 14 useful divisors (2, 3, 4, 5, 6, 7, 8, 10, 12, 14, 15, 20, 21 and 24), while both 900 and 960 have 12 (2, 3, 4, 5, 6, 9, 10, 12, 15, 18, 20 and 25, and 2, 3, 4, 5, 6, 8, 10, 12, 15, 16, 20 and 24) respectively). As such, most sites seem to use one of these, with 960 becoming ever more popular.

W-H-N-M-F

At this point, some of you will have already guessed what W-H-N-M-F stands for. For those of you who haven’t, it’s a short hand way of writing Wrapper, Header, Navbar, Main body and Footer. These are the five basic divs that you’ll have in pretty much any layout. As such, you can feel free to steal the following piece of code, which has them all already marked out:

<body>
	<div id="wrapper">
		<div id="header">
		</div>
		<div id="navbar">
		</div>
		<div id="main">
		</div>
		<div id="footer">
		</div>
	</div>
</body>

Each of these elements will then have CSS properties given to them, which will dictate how our layout looks. Assuming we’re dealing with a centered 960px layout, your style.css file should look like this:

/* Our CSS Stylesheet */
 
body {  }
#wrapper { width: 960px; margin: 0 auto; padding: 0; } /* Setting margin to 0 auto will center this div */
#header { width: 100%; padding: 0; height: 150px; } /* Change the height to whatever it needs to be */
#navbar { width: 100%; margin: 0; padding: 0; height: 50px; } /* Change the margin and padding to align, and height as needed */
#main { width: 100%; margin: 0; padding: 0; } /* Change the height to whatever it needs to be */
#footer { width: 100%; margin: 0; padding: 0; height: 100px; } /* Change the margin values to align, and height as needed */

Two Column - Fixed

To make a two column layout, we take what we’ve got so far, and simply put two divs inside the Main div. For the purposes of this exercise, we’ll call them Sidebar and Content.

To style them, first decide which one you want on the left. If it’s the sidebar, we’re going to want them to both be set as float left. If we want the content on the left, we’ll want the sidebar to float right. To do this, we’ll also apply some classes to them. The new CSS looks like this:

/* Sidebar and content */
 
#sidebar { width: 260px; } /* Change the width as needed */
#content { width: 700px; } /* Change the width as needed */
 
/* Float controls */
 
.left { float: left; }
.right { float: right; }
.clear { clear: both; }
.noshow { display: none; }

And now we add the Sidebar and Content to our code. We’ll set our sidebar on the right.

<body>
	<div id="wrapper">
		<div id="header">
		</div>
		<div id="navbar">
		</div>
		<div id="main">
			<div id="sidebar" class="right">
			</div>
			<div id="content" class="left">
			</div>
			<div class="clear">
			<p class="noshow">All's clear</p>
			</div>
		</div>
		<div id="footer">
		</div>
	</div>
</body>

And voila! We have a two column layout. Just before we go though, if you have the content div before the sidebar div in your code, then you’d need to float your content div right to make the sidebar appear on the left. Similarly, floating them both left with put the content on the left, and sidebar on the right.

Three Column - Fixed

Making a three column layout isn’t much harder. All we do is add in a new sidebar, and change the names slightly. In this example, we’ll call our columns Leftsidebar, Content and Rightsidebar.

Firstly, lets create the code, which when you’re done should look like this:

<body>
	<div id="wrapper">
		<div id="header">
		</div>
		<div id="navbar">
		</div>
		<div id="main">
			<div id="leftsidebar" class="left">
			</div>
			<div id="content" class="left">
			</div>
			<div id="rightsidebar" class="left">
			</div>
			<div class="clear">
			<p class="noshow">All's clear</p>
			</div>
		</div>
		<div id="footer">
		</div>
	</div>
</body>

Now we create the CSS we’ll need:

/* Sidebar and content */

#leftsidebar { width: 230px; } /* Change the width as needed */
#content { width: 500px; } /* Change the width as needed */
#rightsidebar { width: 230px; } /* Change the width as needed */

Again, there’s nothing particularly fancy going on here. You can add margins and padding as you want, and everything will play nicely, as long as you remember to adjust the widths to make room.

Fluid Layouts

The first advantage to how we’ve coded everything so far, is that if you want to shift over to fluid layouts, all you have to do is create the following CSS property:

/* Set ems to 10px */
body { font-size: 62.5%; }

This sets our default font size to 10px, and allows us to simply divide our normal widths by 10, and then change them from px to em. Alternatively, if you want to work in percentages, you can do that too, again by simply changing the width values.

Equal Height Columns

The reason the above was so easy, is because so far we’ve not put any hacks in place, to do things like equal height columns. Unfortunately, whilst this can be done with CSS, none of the methods that you can use to do it are particularly clean, and they make it more complex to change things later. As such, I prefer to use Javascript to sort it out.

If you want to do the same, you’ll first need to grab the script from here and then upload it to your server. Next, in the head section of your pages, put the following code:

<script type="text/javascript" src="p7_eqCols2_10.js"></script>

Then change your opening body tag to look like this:

<body onLoad="P7_equalCols2(1,'leftsidebar','P','content','P','rightsidebar',P)">

…where leftsidebar, content and rightsidebar are the IDs of the columns you want to be changed, and P is the last tag in that column (so P if it’s a paragraph, IMG for an image and so on).

Hey presto, you’ve got equal height columns, with no messy CSS!



Get a Trackback link

8 Trackbacks/Pingbacks

  1. Pingback: Items of interest » Blog Archive » Bookmarks for December 4th through December 5th on December 5, 2008
  2. Pingback: links for 2008-12-05 « Minesa IT on December 5, 2008
  3. Pingback: rascunho » Blog Archive » links for 2008-12-05 on December 5, 2008
  4. Pingback: Pablo Formoso » Guía definitiva de CSS en Searchlight on December 6, 2008
  5. Pingback: WebDesign Bureau of Mauritius | An ultimate CSS layout guide. on December 6, 2008
  6. Pingback: JeremiahTolbert.com » Blog Archive » links for 2008-12-07 on December 7, 2008
  7. Pingback: Activity 2008-12-08 | Adam Horne. on December 9, 2008
  8. Pingback: FriDizeo Soup - A Collection of Free CSS Tutorials | webdizeo.com on December 19, 2008

Leave a comment

You must be logged in to post a comment.