2 Column CSS and XHTML Layout Tutorial

In this tutorial I will show you how to create a basic, fluid, table-less 2 column website layout using CSS and XHTML. The page will have a header, a left hand column with a fixed width for navigation and a right hand column with a fluid width that can be used as the content area and a footer.

First I will start with a bare-bones document as shown below.

<!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" xml:lang="en" lang="en">

<head>
<title>WebDevelopmentTutorials.com</title>

<style type="text/css">

</style>

</head>
<body>

</body>
</html>

The document will be grouped into 5 seperate divs, each with its own unique ID selector. The divs are named "container" which will wrap around the content of the entire document, "header", "left", "content" and "footer".

I have also added some comment tags and some content to the document.

<!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" xml:lang="en" lang="en">

<head>
<title>WebDevelopmentTutorials.com</title>

<style type="text/css">

</style>

</head>
<body>

<div id="container">
<div id="header">

<h1>header</h1>
</div><!-- end id header -->
<div id="left">
<p>left column</p>
</div><!-- end id left -->
<div id="content">
<p>content area</p>
</div><!-- end id content -->
<div id="footer">
<p>footer</p>
</div><!-- end id footer -->
</div><!-- end id container -->

</body>
</html>

Click on the following link to see what code above produces:
2 column layout tutorial example

When you view the example page above, you will notice that all of the HTML elements are positioned statically, which means one after another just as they appear in the document.

I want the content of the web page to sit in from the edge of the web browser so I will set the margins on the main div (the id named container) that wraps around the content.

I will set the width to 80% in the CSS styles as such:

<style type="text/css">
#container { width: 80%; }
</style>

Any width can be used, including 100%, which will force the content to the left and right edge of the web browser.

I also want to center the page content in the web browser and add some margin to the top and bottom of the web page. To do this I apply "auto" margins to the left and to the right of the id container to center the content and a margin of 10px to give the web page a top and bottom margin of 10px.

<style type="text/css">
#container { width: 80%; margin: 10px auto; }
</style>

Next I will add a border to all divs by adding the code below to every div to help you more clearly see where they are positioned.

{ border: 1px solid #000; }

The code below shows you the CSS and XHTML code so far.

<!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" xml:lang="en" lang="en">

<head>
<title>WebDevelopmentTutorials.com</title>

<style type="text/css">

#container
{
width: 80%;
margin: 10px auto;

border: 1px solid #000;
}
#header
{ border: 1px solid #000; }
#left
{ border: 1px solid #000; }
#content
{ border: 1px solid #000; }
#footer
{ border: 1px solid #000; }

</style>

</head>
<body>

<div id="container">
<div id="header">
<h1>header</h1>
</div><!-- end id header -->
<div id="left">
<p>left column</p>
</div><!-- end id left -->
<div id="content">
<p>content area</p>
</div><!-- end id content -->
<div id="footer">
<p>footer</p>
</div><!-- end id footer -->
</div><!-- end id container -->

</body>
</html>

Next I will apply a float to the left column and add a width to the left column because when a div is set to float, a width must also be set for that particular div.

#left
{
border: 1px solid #000;
float: left;
width: 200px;

}

The code below has the styles added to the div with the id named "left".

<!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" xml:lang="en" lang="en">

<head>
<title>WebDevelopmentTutorials.com</title>

<style type="text/css">

#container
{
width: 80%;
margin: 10px auto;
border: 1px solid #000;
}
#header
{ border: 1px solid #000; }
#left
{
border: 1px solid #000;
float: left;
width: 200px;

}
#content
{ border: 1px solid #000; }
#footer
{ border: 1px solid #000; }

</style>

</head>
<body>

<div id="container">
<div id="header">
<h1>header</h1>
</div><!-- end id header -->
<div id="left">
<p>left column</p>
</div><!-- end id left -->
<div id="content">
<p>content area</p>
</div><!-- end id content -->
<div id="footer">
<p>footer</p>
</div><!-- end id footer -->
</div><!-- end id container -->

</body>
</html>

Clicking on the following link takes you to the web page that the code above produces:
2 column layout tutorial example

Now that I have floated the left column, I need to add a left margin to the div named "content" so that the content will not wrap around the and under the left column. To make the div named "content" appear as though it is in another column, I apply "margin-left" to the div named content. When doing this be sure to make the width is greater than the overall width of the left column. In this case I will make the left margin "225px", which is 25 pixels greater than the width of the left column.

#content { border: 1px solid #000; margin-left: 200px; }

Next I will force the footer below any floated elements that are above it by adding "clear:both" to the id named "footer" as shown in the CSS code below.

#footer { border: 1px solid #000; clear: both; }

The finished code is shown below.

<!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" xml:lang="en" lang="en">

<head>
<title>WebDevelopmentTutorials.com</title>

<style type="text/css">

#container
{
width: 80%;
margin: 10px auto;
border: 1px solid #000;
}
#header
{ border: 1px solid #000; }
#left
{
border: 1px solid #000;
float: left;
width: 200px;
}
#content
{
border: 1px solid #000;
margin-left: 225px;
}
#footer
{
border: 1px solid #000;
clear: both;
}

</style>

</head>
<body>

<div id="container">
<div id="header">
<h1>header</h1>
</div><!-- end id header -->
<div id="left">
<p>left column</p>
</div><!-- end id left -->
<div id="content">
<p>content area</p>
</div><!-- end id content -->
<div id="footer">
<p>footer</p>
</div><!-- end id footer -->
</div><!-- end id container -->

</body>
</html>

The following link takes you to a web page the code produces:
2 column layout tutorial example

Use the text editor below to practice what you have learned.

Free Website Templates

Free Web Tools

Recommended Websites