Dave Woods - Freelance Web Design Warwickshire

CSS Faux Columns

CSS layouts are extremely flexible but trying to replicate a layout that was easy with tables sometimes causes a few problems. The method of different columns being filled with solid colour and appearing the same height isn’t so easy with CSS but this is where CSS Faux Columns can become extremely useful.

Let’s start off by seeing an example of a layout using CSS Faux Columns.

The amazingly simple trick is to use a background-image on the container which repeats vertically down the page to give the impression of columns.

And here’s the image that is used in the example to achieve this effect.

HTML

The HTML is very simple and uses a header, navigation, content and sub-content.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en"><head>
<title>CSS Faux Columns</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<div id="container">
<h1>Header</h1>
<ul id="navigation">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Contact</a></li>
</ul>
<div id="content">
<h2>Content</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut turpis. Phasellus lacus nisl, pellentesque quis, rhoncus at, dapibus a, nibh. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas arcu mauris, rutrum at, ullamcorper at, ornare lacinia, orci. Etiam urna. Ut ut mauris. Ut nec velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Quisque nisi enim, imperdiet sed, dapibus in, blandit ac, justo. Fusce ante libero, adipiscing at, egestas id, vehicula sit amet, nibh. Donec facilisis. Nulla facilisi. Proin tortor.</p>
<p>Aenean lobortis, ligula et varius commodo, diam arcu rutrum magna, eget viverra lorem est a lacus. Mauris laoreet dui in ligula. Integer ullamcorper leo id ligula. Quisque sapien. Integer ultrices dapibus nunc. Praesent vel quam et eros sagittis scelerisque. Nullam malesuada. Sed id velit sed eros condimentum porta. Nulla augue leo, venenatis ut, malesuada sed, luctus nec, velit. Fusce lacus nibh, semper a, mollis eget, cursus at, metus. Sed eros. Pellentesque libero sapien, molestie nec, vulputate in, dignissim et, ante. Cras tincidunt nisi vitae enim. In convallis, quam quis gravida mollis, sapien ipsum volutpat nisl, id ullamcorper lectus felis a nunc. Etiam et justo. Aliquam a ante in felis euismod scelerisque.</p>
</div>
<div id="subcontent">
<h2>Sub Content</h2>
<p>Maecenas enim. Mauris vulputate justo in tellus. Phasellus quis dolor. Cras accumsan pulvinar ligula. Nulla ornare dapibus dui. Aenean ipsum lacus, scelerisque id, fermentum ac, sodales in, diam. Donec condimentum porttitor nunc. Aenean in sem. Nam aliquam diam. Nam mollis, enim vitae consectetuer lacinia, nibh pede semper ante, ut aliquam orci massa et neque. Nulla semper, nibh ac mattis sollicitudin, nisl lorem fringilla libero, quis ultrices libero est sed metus.</p>
</div>
</div>
</body>
</html>

So far so good. Now let’s get stuck into some CSS.

CSS

First off, some generic styling information just to set some fonts and some spacing.

* {
padding: 0;
margin: 0;
}
html {
overflow-y: scroll;
}
html, body {
height: 100%;
}
body {
font-size: 100%;
font-family: "lucida sans", arial, verdana, helvetica, sans-serif;
background-color: #CCC;
}
h1 {
font-size: 1.8em;
background-color: #000;
color: #FFF;
padding: 1em;
margin: 0 1px;
}
h2 {
font-size: 1.6em;
padding-bottom: 0.3em;
}
p {
padding-bottom: 1em;
}
a, a:link {
color: #3A484C;
font-weight: bold;
}
a:hover {
color: #000;
}

That should be fairly simple, next we’ll have a look at applying the background image to the container and making it fill the height of the page.

#container {
font-size: 0.75em;
width: 750px;
margin: 0 auto;
background-image: url(background.gif);
background-color: #fff;
min-height: 100%;
}
* html #container {
height: 100%;
}

This uses the same 100% height method as used within my 100% Height Layout Using CSS Tutorial and is essentially creating a container with a width of 760px, height 100% which is centered within the page.

We can then position, the columns within this by floating them into position and providing the required width and padding equivalent to the width’s of the background image.

#navigation {
float: left;
width: 128px;
padding: 10px 11px;
list-style-type: none;
}
#content {
float: left;
width: 329px;
padding: 10px 11px 10px 10px;
}
#subcontent {
float: left;
padding: 10px;
width: 230px;
color: #B7D4DA;
}

One last thing you’ll need to do is to clear the float’s so that if the content is longer than the browser window, the background image will continue when you scroll. In this situation I’ve used the “easy clearing method” as the overflow method does cause an issue in IE6 whereas the method below will ensure that the float’s are cleared in all browsers without the need for additional markup.

#container:after {
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

Summary

Once you’re aware of this method, it can open upon a whole range of possibilities that weren’t available before. It’s easy, requires no extra markup and best of all it works in all the major browsers available today, including IE6.

10 comments on “CSS Faux Columns

  1. Jermayn Parker

    Good tutorial!
    My only point I disagree is that for a simple background like you have used for an example, you could just use css settings to change the background and place a border around them.

    BUT for complex backgrounds, you would use this method.

    Enjoying these tuts man!

  2. Dave Post author

    Hi Jermayn, unfortunately that wouldn’t really work as each column would only expand in height as much as the content unless you hard coded a larger fixed height but this in itself would present it’s own set of problems.

    By using faux columns, you can create backgrounds for various columns and ensure that they “appear” the same height as each other without any complexity involved.

    Hope that makes sense.

  3. Johan Strömquist

    I’ve been working with a classical header / content / footer setup for a web page of one of our clients. After working with the design bits and bobs I realised that rescaling the window in Mozilla made the backgrounds stop rendering when I scrolled below the initial view port.

    Reading through your tutorial on 100% height I desperately tried duplicating the code but to no avail.

    It wasn’t until following your link to this tip in one of the answers to a comment in that tutorial that I found the answer:
    “One last thing you’ll need to do is to clear the float’s so that if the content is longer than the browser window, the background image will continue when you scroll.”

    I’ve been working quite a long time with CSS but never really come to terms with the finer aspects of floating and positioning. By applying the ‘clear’-method to ‘:after’ everything works, but… I have no idea why?

    What do the different parameters actually do and why does my content suddenly flow just the way I want it?

    Thanks for solving my problem and for some excellent tutorials, and if you could actually provide me with an answer I might finally understand why my CSS has been haunting me for so long. 🙂

  4. Chris

    Thanks for this! At first I couldn’t figure out why I was getting extra space in FF at the very top of the page – it ended up being a top margin on my header img (which was display: block). Added top padding to the header div and that did the trick.

  5. Pingback: Dave Woods - Freelance Web Designer UK » 10 CSS Tips Every Web Developer Should Know

  6. Arian Hojat

    This worked pretty well on one of my sites.
    Wondering is there an advantage to just set display: table; on all good browsers and then use height: 100% on bad browsers.
    or the min-height/height is better solution?

  7. Dave Post author

    The only reason I don’t use display: table; just yet is that you still have to use faux columns for IE7 and below so you end up having to create different code for different browsers.

    I always prefer to create one solution that works for all browsers so that it’s easier to maintain or change in the future.

    by all means enhance things with CSS3 or JavaScript but I’d always make sure that the base code works for all browsers in the same way first.