CSS Layout Starting Points

Rachel Andrew

I build a lot of CSS layouts, some incredibly simple, others that cause sleepless nights and remind me of the torturous puzzle books that were given to me at Christmas by aunties concerned for my education. However, most of the time these layouts fit quite comfortably into one of a very few standard formats. For example:

Liquid, multiple column with no footer
Liquid, multiple column with footer
Fixed width, centred

Rather than starting out with blank CSS and (X)HTML documents every time you need to build a layout, you can fairly quickly create a bunch of layout starting points, that will give you a solid basis for creating the rest of the design and mean that you don’t have to remember how a three column layout with a footer is best achieved every time you come across one!

These starting points can be really basic, in fact that’s exactly what you want as the final design, the fonts, the colours and so on will be different every time. It’s just the main sections we want to be able to quickly get into place. For example, here is a basic starting point CSS and XHTML document for a fixed width, centred layout with a footer.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
     <title>Fixed Width and Centred starting point document</title>
     <link rel="stylesheet" type="text/css" href="fixed-width-centred.css" />
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<div id="wrapper">
     <div id="side">
          <div class="inner">
               <p>Sidebar content here</p>
          </div>
     </div>
     <div id="content">
          <div class="inner">
               <p>Your main content goes here.</p>
          </div>
     </div>
     <div id="footer">
          <div class="inner">
               <p>Ho Ho Ho!</p>
          </div>
     </div>
</div>
</body>
</html>

body {
     text-align: center;
     min-width: 740px;
     padding: 0;
     margin: 0;
 }

 #wrapper {
     text-align: left;
     width: 740px;
     margin-left: auto;
     margin-right: auto;
     padding: 0;
 }

 #content {
     margin: 0 200px 0 0;
 }

 #content .inner {
     padding-top: 1px;
     margin: 0 10px 10px 10px;
 }

 #side {
     float: right;
     width: 180px;
     margin: 0;
 }

 #side .inner {
     padding-top: 1px;
     margin: 0 10px 10px 10px;
 }

 #footer {
     margin-top: 10px;
     clear: both;
 }

 #footer .inner {
     margin: 10px;
 }

9 times out of 10, after figuring out exactly what main elements I have in a layout, I can quickly grab the ‘one I prepared earlier’, mark-up the relevant sections within the ready-made divs, and from that point on, I only need to worry about the contents of those different areas. The actual layout is tried and tested, one that I know works well in different browsers and that is unlikely to throw me any nasty surprises later on. In addition, considering how the layout is going to work first prevents the problem of developing a layout, then realising you need to put a footer on it, and needing to redevelop the layout as the method you have chosen won’t work well with a footer.

While enjoying your mince pies and mulled wine during the ‘quiet time’ between Christmas and New Year, why not create some starting point layouts of your own? The css-discuss Wiki, CSS layouts section is a great place to find examples that you can try out and find your favourite method of creating the various layout types.

Rachel Andrew is a Director of edgeofmyseat.com, a UK web development consultancy and creators of the small content management system, Perch; a W3C Invited Expert to the CSS Working Group; and Editor in Chief of Smashing Magazine. She is the author of a number of books including The New CSS Layout for A Book Apart and a Google Developer Expert for Web Technologies.

She curates a popular email newsletter on CSS Layout, and is passing on her layout knowledge over at her CSS Layout Workshop.

When not writing about business and technology on her blog at rachelandrew.co.uk or speaking at conferences, you will usually find Rachel running up and down one of the giant hills in Bristol, or attempting to land a small aeroplane while training for her Pilot’s license.

CSS Layout Starting Points

About the author

Comments