CSS – Absolute Position Sidebar

This is what I call CSS tip in 30 seconds:

It is very useful to be able to put your navigation bar or side bar at the bottom of your HTML, and absolute position it to appear up on your site where you want it to go. This is actually pretty easy.

If you just want it to be along the left side of your screen and lets say 100 pixels from the top (for your header), this would be your code:

#leftnav {
position:absolute;
top:100px;
left: 0;
}

If you want your navigation bar to go along the right, obviously you would replace “left” with “right”.

Here is where it can get complicated: What if your layout is a fixed width, centered layout? Then you cant just align the navigation bar off to one side, because that would not stay inside of your layout, it would jump all the way off to the side. Here’s what you would do for a 1000 pixel width and centered website layout:

#leftnav {
top:100px;
right: 50%;
margin-right: -500px;
}

Quick Explanation: “right:50%” causes the right side of your navigation bar to be exactly in the middle of your screen. It doesn’t matter what size screen you have, it will always be right in the middle. Then the “margin-right:-500px” moves the entire navigation bar 500 pixels to the right. So in essence, the navigation bar will always be 500 pixels to the right of the exact middle of your browser! That way it looks permanent, and won’t move as you shrink your screen.

Another Note: If your navigation bar is going to the left side of your screen, here is another option: If you leave the side bar or navigation bar without the absolute positioning, and it appears directly below where you want it, then if you leave off the “right” or “left” in your CSS (leaving only “top:100px”) your navigation bar will move straight up to the top of the screen, and stay where you need it to be.

-CSS in a Flash!
-Ashton Sanders