How do you make a two column CSS layout with color in either column that spreads to the full height of the page?
This article will show you how to build a basic two column layout that has:
- Liquid width (based on the browser window size or viewport)
- Full width header and footer
- color in either or both columns
- color that stretches the full height of the columns - no matter which of them is longer
This method uses a background image to create the illusion of a colored column which means that the narrower column must be set to an exact pixels width. This may not suit your particular needs. However, there are many different methods that can be used to achieve a two column layout. Look around before you decide which one is right for you!
Step 1. Setting the containers
Let’s start by creating 5 basic containers and giving them all a unique ID:
<div id="container">
<div id="banner">
</div>
<div id="nav">
</div>
<div id="content">
</div>
<div id="footer">
</div>
</div>
Step 2. Drop in the content
The next step is to drop in some representational content. Try to use content that reflects how the real text will function within each container. It is also important that the content - even at this early stage - should be semantically correct. So, you should use standard HTML elements to mark up each block of content. If you have a heading, wrap it in a heading tag, starting with <h1></h1>. If it is normal content, each paragraph should be wrapped within <p></p>.
Where possible, these HTML elements will be styled using type selectors, rather than having to resorting to additional classes or IDs.
<div id="container">
<div id="banner">
<h1>Site name</h1>
</div>
<div id="nav">
<p>
Lorem ipsum..
</p>
</div>
<div id="content">
<h2>
Page heading
</h2>
<p>
Ut wisi enim..
</p>
</div>
<div id="footer">
Footer stuff here
</div>
</div>
Step 3. Styling the body
3.1 Margin and padding
Some browsers have a default padding set on the <body> element, and others use a default margin. To force the page layouts to sit in the top left corner of the viewport, you must remove both margin and padding from the <body>.
body
{
margin: 0;
padding: 0;
}
3.2 Font-family
You can also set the font-family for the entire page. Be aware that some browsers do not properly inherit font-family. This may mean that table elements or form elements need to be styled with a font-family as well.
It is important to set a range of font-family options neding in a generic font family. If users do not have Georgia, they may have Times or Times New Roman. If all else fails, they should at least have a serif font of some sort.
Any font family that has white space between words needs to be enclosed in quotation marks.
body
{
margin: 0;
padding: 0;
font-family: georgia, times, "times new roman", serif;
}
3.3 color
color and Background-color can be added into the body rule set.
body
{
margin: 0;
padding: 0;
color: #000;
background-color: #ddd;
}
Step 4. Styling the container
The success of this layout is based on this container. We will place a left aligned background image inside the container and set it to repeat down, but not across the page. The image will be as wide as the left column. This will give the appearance of a full colored column.
4.1 Margins
For this example, we will center the container and move it in from the edges of the viewport. To achieve this, we need to add margins on both sides of the container. We can use a shorthand declaration to define top and bottom margin (1em) as well as left and right margin (5%).
#container
{
margin: 1em 5%;
}
4.2 Adding color
To make the container a different color to the page, we will apply a background-color.
#container
{
margin: 1em 5%;
background-color: #FFF;
}
4.3 The background image
We need to be set a background image in this contaner. This image is 180px wide and will repeat down the page. To do this we set the background-repeat on the y axis only.
#container
{
margin: 1em 5%;
background-color: #FFF;
background-image: url(background.jpg);
background-repeat: repeat-y;
}
4.4 Adding a border
If you want, you can add a border to the container.
#container
{
margin: 1em 5%;
background-color: #FFF;
background-image: url(background.jpg);
background-repeat: repeat-y;
border: 1px solid #333;
}
Step 5. Styling the banner block
5.1 Adding color
We will now add background-color and border-bottom to the banner.
#banner
{
background-color: #666;
border-bottom: 1px solid #333;
}
5.2 Setting margin and padding on the heading
We also need to style the <h1> inside the banner <div>. To do this we will use a descendant selector - which will select only <h1> elements within a <div> styled with id="banner".
Browsers display headings in slightly different ways - both Opera and Internet Explore do not recognize margin-top correctly. One method to position the heading exactly within the containing <div> is to set the "margin: 0" and use padding to push the heading content into the desired position. Padding can be combined into one shorthand declaration.
#banner h1
{
margin: 0;
padding: .5em;
}
Step 6. Styling the left nav
6.1 Floating the nav
The nav <div> can be moved to the left of the screen by applying "float: left". All floated items must be given a width (apart from those elements with intrinsic width, such as images).
#nav
{
float: left;
width: 160px;
}
6.2 Margin
Margin-left is added to the <div> to push it away from the left edge of the containing box.
#nav
{
float: left;
width: 160px;
margin-left: 10px;
}
6.3 Padding
Padding is added to the top of the <div> to push it down from the banner.
#nav
{
float: left;
width: 160px;
margin-left: 10px;
padding-top: 1em;
}
6.4 Margin-top
Some browsers do not render margin-top correctly for the first item inside a container. As we want all items to line up correctly, we will turn off "margin-top" on the paragraph within this container using a descendant selector.
#nav p
{
margin-top: 0;
}
Step 7. Styling the content block
The content <div> needs to be styled so that it does not flow under the navigation <div>. To do this, we will set a left margin - slightly wider than the width of the nav. The left margin is the critical measurement. It gives the illusion that there is actually a column, even though it is statically positioned.
#content
{
padding-top: 1em;
margin: 0 2em 0 200px;
}
Step 8. Styling the footer block
8.1 clear: both
The footer needs "clear: both" to force it onto a new line, below any floated items.
#footer
{
clear: both;
}
8.2 Background color
We can set the background color to differentiate it from the content above.
#footer
{
clear: both;
background-color: #666;
}
8.3 Padding
Padding can be applied to move the text in from the edges of the container.
#footer
{
clear: both;
background-color: #666;
padding: 1em;
}
8.4 Text alignment
To move the text to the right edge of the containing box, "text-align: right" is used.
#footer
{
clear: both;
background-color: #666;
padding: 1em;
text-align: right;
}
8.5 Border-top
We can also set a border-top, using a shorthand rule.
#footer
{
clear: both;
background-color: #666;
padding: 1em;
text-align: right;
border-top: 1px solid #333;
}
We have now finished the basic layout.
Full-width variation
It is very easy to convert this layout into a full width version. All we do is change "margin: 1em 5%" to "margin: 0".
#container
{
margin: 0; /* changed from 1em 5% */
background-color: #FFF;
background-image: url(background.jpg);
background-repeat: repeat-y;
border: 1px solid #333;
}
Right nav variation
It is also very easy to convert this layout to a right nav version. All we need to do is change the nav to "float: right", and set the background image to the right as well.
#container
{
margin: 1em 5%;
background-color: #FFF;
background-image: url(background.jpg);
background-repeat: repeat-y;
border: 1px solid #333;
background-position: right; /* ADD THIS RULE */
}
#nav
{
float: right; /* WAS FLOAT LEFT */
width: 160px;
margin-right: 10px; /* WAS MARGIN-LEFT */
padding-top: 1em;
}
#content
{
padding-top: 1em;
margin: 0 200px 0 2em; /* SWAP ORDER */
}
Column borders variation
If you have tried to apply borders to any columns within 2 and 3 column layouts, you may have noticed that the borders will only extend as far as the content. One way around this is to use a background image that looks like a border. The image will extend to the depth of the longest column.
