Your web home for how to's for web beginners. A jargon-free zone dedicated to helping your web knowledge grow.

Help For Web Beginners

Press CTRL + D to
Bookmark this Page

Fixed Left Navigation Menu with CSS

In a recent blog post I mentioned the negative SEO benefits of using frames to construct a website. That post was inspired by a very nice looking website that had a fixed navigation menu using images on the left of the page and content that scrolled down the right side of the page. After posting that entry I thought about how can a simple two column page be constructed using HTML and CSS to achieve the same layout without frames or JavaScript.

I admit that I needed to a bit of research on this. I looked at several techniques and found one that did indeed work with both FireFox and Internet Explorer and still validated as proper code.

All of the examples had extraneous code that made it somewhat confusing as to what was needed and what was being used to pretty things up. Even the article that claimed to remove the extra unneeded bits had way more code than is neccessary.

Rather than get into a long winded explanation of how the browsers do things differently, I thought I would simply provide the code and identify where you can easily change things to fit your own design. To see what a page that uses this fixed navigation technique, I have provided a demo page.

The CSS for Fixed Navigation

Add the following code to the head section of your code or to your external style sheet...

<style type="text/css">

html {background: #000000;}

body {margin:0; padding:0 10px 0 10px; border:0; height:100%; overflow-y:auto;}

#page {margin:10px 0 20px 150px; display:block; background:#ffffff; padding:10px;}

#menu {display:block; top:10px; left:10px; width:130px; position:fixed;}

* html #menu {position:absolute;}

</style>

If using an external style sheet, do not include the two lines displayed in yellow.

How to customize this to match your site's design

Change the page's overall background color by replacing {background: #000000} with the hex color code for the color of your choice.

To change the background color of the main text area (shown in white on the sample page), replace background: #ffffff; with the hex color code of your choice.

There are a number of places you will need to change based upon the width of your fixed menu.

Where the sample code has width:130px;, replace the 130px with the width, in pixels, of your menu. If using images adjust this number to cover the width of the images with a little to spare for whitespace.

Where the sample code has left:10px; replace that with an amount of your choosing, this is the amount of space between the edge of the browser window and where the menu starts.

Add those two numbers and add a bit extra for spacing between the menu on the right side and the main content, replace the 150px value in the sample code.

Internet Explorer Fix

As usual, Internet Explorer requires a bit of convincing to do things properly. The following code should be added in between your head tags; after the code shown above if you are not using external style sheets.

<!--[if lte IE 6]>
<style type="text/css">
/*<![CDATA[*/
html {overflow-x:auto; overflow-y:hidden;}
/*]]>*/
</style>
<![endif]-->

The HTML Code

Part of what makes this technique so powerful is that it even puts the code for the menu after the main content for the page - a real plus for search engine optimization. The code below goes between the body tags of your HTML code.

<body>
<div id="page">
Main content for your page goes here.
</div>
<div> footer content goes here</div>
<div id="menu">
your menu goes here
</div>
</body>

CSS Navigation

There are many ways to use CSS for navigational menus. This technique is a great way to utilize a little bit of code to eliminate much of the need for frames and to make your pages more search engine friendly.

About the Author

HelpForWebBeginners.com is a website dedicated to providing free, easy to understand, online How To's for true web beginners. While the materials are not free or available for reprints, they are offered freely for individual use. Please use the contact page to let Michele know if this tutorial has been helpful or if there are any other beginner web programming or MySpace related tutorials you would like to see.