3 Column Theme: Include a horizontal navigation bar

March 17th, 2008.

3 column blog with divs

You should have a basic three column layout with a header and footer, as described here.

To include a horizontal navigation bar, you simple need to add one more div.

(To create a vertical navigation bar, you would simply enter the relevant text with links into one of your columns.)

Step 1. Include horizontal navigation

Simply add the following div to you style.css file:

#nav{width: 100%;
height: 20px;
margin: 0px auto 0px;
background-color:green; }

Step 2. Include horizontal navigation

Now you add you navigation div in where you would like it to appear. So the Xhtml should look similar to this:

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″>

<title>Untitled Document</title>

</head>

<body>

<div id=”header”>HEADER</div>

<div id=”header”>NAVIGATION</div>

<div id=”rightContainer”>RIGHT Container</div>

<div id=”leftColumn”>LEFT COLUMN</div>

<div id=”middleColumn”>MIDDLE COLUMN</div>

<div id=”footer”>FOOTER</div>

</div>

</div>

</body>

</html>

You should have something that looks like this…

Have a play around. Have a peak at here for more information on background colors.

Let me know how it goes?

Thanks, Lilly

This article is written by: Lilly Mouse...I love communicating (through writing, art, dance, and any other way imaginable). Blogging and I have become very good friends in the last few years. LillyMouse.com is my creation, and I'm so please to share it with you! Ciao for now, Lilly Read more from this author