Dave Woods - Freelance Web Design Warwickshire

2 Column Fixed CSS Layout

Here’s the 2 Column Fixed CSS layout that will be covered in the tutorial below.

There’s still a lot of people in the web design world that are still using tables for layout. Quite often this is due to lack of education or the fact that the person creating a web page has learnt how to use tables and is therefore reluctant to drop their inline styles and table layouts for CSS.

I came into the industry when table layouts were rife and there was no other way of creating graphical layouts without the use of tables so when CSS was finally supported by the leading browsers and we could finally forget about Netscape 4.2, it was difficult to change my way of thinking.

However, to create web pages that are standards compliant, cross browser compatible and accessible you’ll need to start using HTML and CSS correctly. Within this post, I’ll be guiding you through a basic CSS layout which you can then adapt to your requirements.

The HTML

If you’ve been used to tables then you’ll be used to creating HTML. However, with CSS you shouldn’t be coding anything within the page that is presentational. Gone are the tables, endless spacer gif’s and repeated <br>’s.

Here’s the HTML you’ll need

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>A Simple CSS layout</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
</head>
<body>
<div id="container">
<div id="header">
<h1>Header</h1>
</div>
<div id="content">
<ul id="navigation">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
<li><a href="#">Link 5</a></li>
</ul>
<div id="maincontent">
<h2>Page title</h2>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec et est id diam pulvinar bibendum. Suspendisse eget ipsum et nulla tristique malesuada. Nulla vel ligula. Duis ac ante vitae urna tempus gravida. Nam porttitor. Mauris condimentum rhoncus nisi. Cras a neque vel dui mollis dapibus. Integer venenatis tincidunt augue. Etiam aliquet. Etiam suscipit. Vivamus sit amet ligula. Nunc felis dui, euismod sollicitudin, vulputate a, nonummy vitae, ligula. Morbi vitae lacus sed arcu bibendum faucibus. Aenean feugiat placerat sapien. Vivamus quis libero. Aenean sed nunc. Nulla consequat, felis vel facilisis convallis, lacus lorem sagittis tellus, at nonummy augue dui sed ante. Nulla ut lorem. Nunc faucibus, neque at blandit auctor, magna mi pharetra dolor, ut sagittis est diam a dui.
</p>
<p>
Mauris viverra dolor. Suspendisse sed tortor eu augue varius commodo. Pellentesque venenatis cursus neque. Nunc quam diam, fermentum sed, dapibus sit amet, vestibulum et, justo. Suspendisse justo. Etiam venenatis risus a tortor. Donec dolor nunc, consectetuer id, luctus ut, vehicula non, risus. Curabitur fermentum lectus a massa. Donec risus enim, tempus sed, euismod vitae, pharetra eu, lacus. Aenean ornare iaculis velit. Donec bibendum neque eget ligula. Vivamus mi eros, porttitor vel, ornare ac, sagittis ac, odio. Morbi rutrum vehicula risus. Proin vulputate lobortis urna. Integer massa libero, vehicula sit amet, aliquet sit amet, imperdiet et, nisl. Nunc in tellus. Aenean pede nisi, feugiat sollicitudin, commodo vitae, malesuada non, pede.
</p>
<p>
Donec augue. Aliquam euismod velit et quam. Fusce facilisis ornare lectus. Ut leo sem, hendrerit ac, ullamcorper quis, pretium at, mauris. Mauris nulla. Donec ut nibh sit amet purus suscipit luctus. Nullam ipsum. In justo libero, sodales vitae, venenatis ac, elementum ac, ligula. Morbi ut massa vel massa tincidunt ornare. Aliquam pulvinar, felis at tempor tempus, quam dolor mattis lorem, a aliquet quam libero et elit.
</p>
<p>
Nunc at elit. Donec pretium sagittis nisl. Curabitur rhoncus mauris ac pede. Curabitur auctor diam vitae sapien. Vivamus varius libero. Nam at sem. Nunc non diam. Curabitur quis elit. Vivamus tempus. Proin vestibulum interdum arcu. Vestibulum dictum libero eu arcu. Donec ipsum. Curabitur tempus libero at mauris. Integer pharetra cursus tortor. In lobortis ipsum eu pede. Mauris fringilla mi. Donec risus mi, vestibulum eu, commodo vitae, venenatis sit amet, dui. Phasellus et velit.
</p>
<p>
Etiam fermentum fringilla lectus. Curabitur semper lacus at erat. Sed a pede. Vestibulum a elit. Ut quis neque. Vestibulum sem massa, aliquet vel, ultricies sit amet, dapibus nec, purus. Nulla facilisi. Aenean neque mauris, feugiat quis, tristique et, posuere a, augue. Integer vel metus nec erat dapibus sodales. Sed lorem. Nam ante nisi, hendrerit a, luctus non, posuere dictum, purus.
</p>
</div>
<div id="footer">
Template created by <a href="https://dave-woods.co.uk">Dave Woods</a>
</div>
</div>
</div>
</body>
</html>

As you can see from the HTML above, the code is divided up into sections using <div>’s. There’s then an unordered list for the navigation, paragraphs for the main text and <h1>, <h2> used for the headings.

Using the tags and id’s within this code we can easily style this using CSS.

The CSS

Firstly, as I mentioned in the Quick Tip: Reset Padding and Margin post a few weeks ago, I use the universal selector to reset all the padding and margins of the browser to zero to give me a base to work from

* {
padding: 0px; margin: 0px;
}

Next, I’ll use the body tag to position the page centrally, give the page a background colour as well as setting font-family and font sizes. This way, it can be set once in the CSS file without having to specify it for every single element. Notice how there’s not a single font tag within the HTML

body {
width: 760px;
margin: 0px auto;
padding: 10px 0px;
background-color: #CCC;
font-family: verdana, arial, helvetica, sans-serif;
font-size: 70%;
}

I’ll then use a container to wrap the rest of my content, whilst this isn’t always necessary it can often be useful so I would always tend to include it so that elements can easily be positioned within it whilst providing flexibility for future additions. A background colour is applied to this and some padding to provide space around the elements that will be nested within this container. I also float this element so that it’s children can be floated into position as it won’t encompass it’s children if left out.

#container {
float: left;
width: 750px;
padding: 5px;
background-color: #FFF;
}

Next we’ll position the header by providing a width, some padding and background colour. Remember that the box model gets the total width by adding together the padding, margin, border and width so this has to be taken into consideration when nesting. The total width of the header is 750px one the 10px of padding is added to either side which enables it to fit perfectly within the container in the previous style.

#header {
float: left;
width: 730px;
padding: 10px;
background-color: #666;
}

The navigation is where it starts getting interesting as we can apply any styles required to the <ul>, <li> or <a> tags.

The first style below specifies the width, background and padding for the container of each element, whilst the #navigation li, style removes the bullet points from the unordered list.

The real styling occurs in the two styles that follow as we initially set the background colour for the menu, text colour, padding, margins and other presentational styles. The most important style within this section though is the display: block; as this forces the to display 100% of it’s parent element. In this case, the #navigation. Without, display: block, the background will simply apply to the text which may be useful for some situations but in this demonstration isn’t the effect we’re looking for.

The last style in the navigation allows the link backgrounds to change colour when the user moves their mouse over them. You could also change the text colour, font-weight or any other value here if required but we’ll just leave it as the background colour for now.

#navigation {
float: left;
width: 120px;
background-color: #CCC;
padding: 5px 5px 4px 5px;
}
#navigation li {
list-style-type: none;
}
#navigation a, #navigation a:link {
background-color: #666;
color: #FFF;
display: block;
padding: 3px;
margin-bottom: 1px;
text-decoration: none;
font-weight: bold;
}
#navigation a:hover {
background-color: #999;
}

Next is the main content. We want this to display next to the navigation so using float: left, we can easily display a <div> adjacent to the navigation. Again, we’ll apply a width and some padding and margins to give it the position required.

#maincontent {
float: left;
width: 595px;
background-color: #DDD;
margin: 0px 0px 5px 5px;
padding: 10px;
}

Finally, comes the footer. The same method is applied to the footer as the header with a width, background and margins and padding applied. We’ll also use text-center to align the text in the middle.

We’ll also use the same rules to change the appearance of the link that we’ve included so that it doesn’t display the blue default link whilst we’ve also applied a hover state for this link

#footer {
float: left;
width: 730px;
padding: 10px;
background-color: #666;
text-align: center;
color: #EEE;
}
#footer a, #footer a:link {
color: #DDD;
}
#footer a:hover {
color: #FFF;
}

Ok, so the page is nearly there but the content doesn’t look quite right. The headers aren’t the right size and the paragraphs are all clumped together.

Using the following styles we can target all heading1, heading2 and paragraphs on the page so that their style is consistent. We can change the font size, margins, colours, backgrounds and many more values so that the same presentation is applied across the site. If your client suddenly decides that the margins are too big or the headings would look better in a different size, then there’s no need to go through the entire site changing each font tag. One quick change in the CSS and you’re done.

p {
margin-bottom: 1.2em;
font-size: 110%;
}
h1 {
font-size: 230%;
}
h2 {
font-size: 170%;
}

And that’s all there is to it, a simple HTML page that uses web standards, validates and uses CSS to separate presentation from content. As always if there’s any questions or comments please feel free to leave any below.

5 comments on “2 Column Fixed CSS Layout

  1. Pingback: Dave Woods » 3 Column Fixed CSS Layout

  2. Christian Perry

    Thanks for such an informative tutorial! This has been a really big help to me.

    Quick question: is there a reason why you don’t use a tag to separate the navigation menu from the main content?

  3. Dave Post author

    Hi Christian, thanks for commenting. The answer to that is a simple one… why include code that you don’t need?

    A lot of designers surround everything with a div but it’s really not required as you can style every tag directly.

    If you need margin around an image, simply apply display: block; and margin: 10px; directly to the image.

    If you apply this to all your code then on a site level you’ll find that you reduce the amount of your code considerably.

    This isn’t to say that you should never do it as sometimes you’ll need to in order to get the design and layout that your looking for but I only ever do that where there is no other solution.

    Hope that makes sense?

  4. Kevin

    Hello Dave,

    I have a question regarding this layout. Is there a way to allow for the navigation div to take up all of the space in it’s column, so that the container background color does not show through around it? Thanks.