Fixed-width two-column CSS layout

Last updated on December 15, 2009. Tags: CSS layout, fixed width webpage, tableless web page layout, two column website

In one of my previous tutorials, I discussed how to create a simple two-column CSS layout. The layout in that tutorial has a fixed width and a fixed height.

In most cases, we would need a website that expands vertically to accommodate more content. Note that one of the purposes of using external CSS is to have consistent appearance throughout the website. We need a website layout that would appear in almost the same way regardless of the amount of content.

There are usually two kinds of websites based on its ability to stretch to accommodate more content, the fixed-width layout and the fluid layout.

Fixed-width layout is the layout of those websites that expand vertically to accommodate the content but retains its width. They are usually restricted for 800-pixel width or 1024-pixel width monitors. If the monitor is larger, you can see alot of white space (or space with decorative background but no content) on the right or on both sides.

On the other hand, fluid layout also expands vertically to accommodate the content, but it also expands to fill the entire width of the browser window.

This tutorial will cover only the fixed-width layout. Personally, I am not fond of fluid layout and there's a debate going on as to which is the better layout. Hence, I am not sure if I will ever discuss fluid layout in one of my future tutorials.

My recent visitor statistics in Google analytics shows that my visitors that are using 800 pixel monitor are only less than 3%. Hence, I started to design fixed 1024-pixel width instead of fixed 800-pixel width. I am expecting that this 3% will further decrease as more people buy new monitors or new computers.

Below is a screenshot of a sample website with fixed width and fixed height. It is similar to the one in the earlier CSS layout tutorial, except that the CSS code is within the header tag and I changed two of the IDs into something more obvious. I did this to make it easier for you to practice using the sample webpage below (since you need to download and tweak only one file).

Note that you can always move the CSS codes on a separate file when working on an actual website design project. Click on the screenshot to see the actual webpage. I suggest that you save a copy of it so that you can practice tweaking its attributes in the CSS code.

The CSS code is shown below.

body {
	background: #ffffff;
	margin: 0;
	padding: 0;
}

a {color: #012a93;}

#wrapper {
	width: 700px;
	margin: 0;
	padding: 0;
	border: 0;
	float: left;
	background: #c0c0c0;
}

#header {
	width: 700px;
	height: 100px;
	margin: 0;
	padding: 0;
	border: 0;
	float: left;
	background: #ffccff;
}

#sidebar {
	width: 200px;
	height: 300px;
	margin: 0;
	padding: 0;
	border: 0;
	float: left;
	background: #ffff99;
}

#content {
	width: 500px;
	height: 300px;
	margin: 0;
	padding: 0;
	border: 0;
	float: left;
	background: #71cce0;
}

#footer {
	width: 700px;
	height: 70px;
	margin: 0;
	padding: 0;
	border: 0;
	float: left;
	background: #ccff99;
}

The division names in the HTML are self-explanatory (if you don't know the relation between CSS IDs and HTML division names, please read this earlier tutorial). The header and the footer are usually rendered consistent throughout the website. The sidebar and the content areas are the ones that need to stretch vertically to accommodate more content (or more navigation menu links in case of the sidebar).

The easiest and most straightforward way of making the sidebar and the content areas vertically stretchable is to simply not define their height. By deleting the height attributes in the CSS for the #sidebar and the #content, they expand or compress to fit the amount of content. Note that the wrapper has already no defined height, enabling it to accommodate the header, sidebar, content and footer.

#sidebar {
	width: 200px;
	margin: 0;
	padding: 0;
	border: 0;
	float: left;
	background: #ffff99;
}

#content {
	width: 500px;
	margin: 0;
	padding: 0;
	border: 0;
	float: left;
	background: #71cce0;
}

Inconsistent column height: the problem of CSS layout

CSS layout has one problem though: the heights of the columns are not always the same. Note that the content and the sidebar areas expand or shrink depending on the amount of content when the height attributes were removed. The sample webpage would look something like the one below.

The content area has too much content to remain at the same height as the sidebar. Hence, the sidebar has less height and the color of the wrapper is visible right below it. Now, if we add more link items on the sidebar and delete the second paragraph of the content, we will get something like this.

In this case, the wrapper is visible under the content area and the height of the sidebar is greater.

Solutions to the inconsistent column height

Perhaps, you might be tempted to go back to the old table layout approach. However, the benefits of CSS layout (such as search engine friendliness and consistent appearance) far outweigh the disadvantage of having an unequal column height. Moreover, the solution to this problem may or may not need columns of equal height, depending on the design that you have in mind.

Some of the tricks frequently used by website designers to solve the problem of unequal column height are discussed below.

Solution 1: Embedded navigation menu

In this solution, we do not attempt to make columns of equal height. Instead, we make it appear that the entire area between the header and the footer is the content area, with the navigation menu merely embedded on it.

The trick here is very simple. Set the background of the #content division to transparent. Next, whatever background color you want for the content area, assign it to the #wrapper division. Then, assign the background color of the sidebar and set its margin to non-zero, maybe around 5 pixels or greater depending on your design.

The CSS codes for the #wrapper, #content and #sidebar divisions are something like the ones below. I will no longer show the CSS for the header and the footer since we do not need to change them from the earlier CSS code.

#wrapper {
	width: 700px;
	margin: 0;
	padding: 0;
	border: 0;
	float: left;
	background: #71cce0;
}

#sidebar {
	width: 180px;
	margin: 5px;
	padding: 0;
	border: 0;
	float: left;
	background: #ffff99;
}

#content {
	width: 500px;
	margin: 0;
	padding: 0;
	border: 0;
	float: left;
	background: transparent;
}

The purpose of the margin is to prevent the sidebar from touching the header, the footer and the left side of the wrapper, thus keeping the appearance that it is an embedded block rather than a column. It should look like the one in the screenshot below. Click on the screenshot to see the actual page.

In this kind of layout, the content area and the sidebar area can have as much content as they need. It is possible that in one page, the content is too long such that the content area is "taller" than the sidebar while on another page, the content area is "shorter". However, the embedded appearance of the sidebar and the apparent color of the content area (which is really the color of the wrapper) is the same for all pages.

Solution 2: False columns

In this solution, we set the background of the sidebar and the content area to transparent. The CSS code would look something like this.

#sidebar {
	width: 200px;
	margin: 0;
	padding: 0;
	border: 0;
	float: left;
	background: transparent;
}

#content {
	width: 500px;
	margin: 0;
	padding: 0;
	border: 0;
	float: left;
	background: transparent;
}

After you set the backgrounds as transparent, proceed to either of the following steps depending on the design you have in mind.

Leave the sidebar and the content with a single color background. The arrangement of the content on the content area and the list items on the sidebar is enough to tell them apart.

It would help if you put some margin on the right side of the sidebar (around 10 to 20 pixels) but if the text and list items in your sidebar are not long enough to reach the right side, the margin is no longer necessary. You may also assign different font style, link color and link hover color to the sidebar to emphasize that it is separate from the content area.
Create a gif (or jpg or png) image with height of 1 pixel and width equal to the width of the wrapper. Color the n leftmost pixels with the color that you want as background for the sidebar (where n is the width of the sidebar, assuming that the sidebar is on the left) and the rest with the color that you want for the content area.

Then, assign this image as background for the wrapper and set its repeat attribute to repeat-y. Check the CSS code below as an example.

#wrapper {
	width: 700px;
	margin: 0;
	padding: 0;
	border: 0;
	float: left;
	background: #c0c0c0 url('columnbg.gif') repeat-y;
}

Below are the sample pages using Solution 2. Click on the screenshot to view the actual webpage. To see the 700 x 1 pixel background image used in Solution 2-b, click here.

Solution 2-a