I know I’m probably about 3 years behind webdesign’s cutting edge (LOL), but I recently discovered how much I love the idea of a fixed, stable sidebar for my websites.

Wonder what I mean by “stable sidebar?” Here’s a couple of screenshots from my British TV shows fansite:

This is how it appears when you first load one of the show pages…

…and when you scroll down the page, the red sidebar on the left stays perfectly in place!

Why I Think This Design is AWESOME

I love the fact that the navigation and site branding stay in plain view, so nobody has to scroll all the way back to the top to browse between pages. Use convenience, YAY!

I also like that it’s a “headerless” design, which I wrote about back in June. Headerless designs force us as webdesigners to keep things more compact and less blathery (though I still found room for a little paragraph on the sidebar, as displayed in the screenshot, lol). Not to mention that the lack of a header means I don’t feel absolutely compelled to make a huge header image–and people don’t have to keep scrolling past that huge image to see content. Double WOOT!

Lastly, I like this kind of design because the sidebar functions as a visual ribbon decorating the page, adding a different color and look to this all-important bit of the page.

One Caveat: This Sidebar’s Not Exactly at the Leftmost Edge of the Page

One thing the above screenshots don’t show you is that the red sidebar isn’t actually at the left page edge; it actually hangs out kind of in the middle of the page in a fixed-width layout instead of being part of a fluid layout like most folks do.

The big reason for this? I can’t make fluid layouts work at the moment. I’ve studied, copied and pasted, and otherwise tinkered, but I’m still missing something important (my attempts at fluid layouts usually don’t scroll right, have horribly spaced out content in wide windows, or have a stinky vertical scrollbar on the side no matter what I do). I’m completely self-taught in webdesign and not really that great at understanding highly technical code, so I’ve had to mostly blunder through on my own when trying new layout styles.

So, in order to incorporate this look which I so loved, I had to find another solution, one that captured the essence of the stable sidebar without making the whole layout fluid (and thus breaking it). The following code was my fix:

How to Make a Robin-Style Stable Sidebar

#sidebar {float: left; width: 200px; padding: 5px; height: 100%; position: fixed; top: 0px; background-color: #8e0001; color: #FFFFFF; font-size: 14px;}

This is the code for the magic little sidebar. What makes the magic happen:

height: 100%;
position: fixed;

This makes the sidebar always as tall as the browser window it’s in, and it keeps the sidebar attached to the top of the page as well, so that it doesn’t scroll with the rest of the content. This sidebar stays right beside its content thanks to the old “wrapper-div” trick (seen below), which corrals both divs into a fixed-width layout.

#wrap {width: 1000px; margin: 0px auto;}

I’ve tested this in IE, Firefox, and Chrome with identical results; I don’t know how any other browser handles it, but it seems to be pretty obedient code. (IE usually has fits if I try anything creative, but this time it behaved itself!)

Comments or Questions?

Leave me a note in the comments about this design–like I said, I know it’s not the cutting edge of design anymore, but I really like it and it seems to function really well for my visitors. What do you think? (Oh, and if you have tips on how to make this kind of design work in a fluid setup, be my guest!! :D)