how to make sidebar?

How do I make a website using CSS where the content scrolls but the sidebar is fixed?

  • Any CSS geniuses out there? [More inside...] I'd like to do a simple, standard web page using CSS: a couple of site navigation links to the left, a long text to the right. The text should scroll, the links should not. I tried using "position: fixed" for the nav bar and this works perfectly well in Firebird. In IE it works like [bleep]. This is probably an easy thing for those in the know. Any tips/workarounds to make this work in IE?

  • Answer:

    Do you have a link to the page and css?

Termite at Ask.Metafilter.Com Visit the source

Was this solution helpful to you?

Other answers

You can't do properly with css yet, but I've seen some hacks, http://devnull.tagsoup.com/fixed/ (http://devnull.tagsoup.com/fixed/vertical.html). Not exactly simple or proper though.

bobo123

As someone who's been doing web design for almost a decade, I think I can be trusted when I say that the best way you can ensure that your website is comfortable, friendly, and easy to use is that you follow standard conventions. Fixed screen areas aren't standard. They're cool, but their counterintuitive to the majority of users, and confusing to many of the rest. People know how to scroll up and down. The guideline that you should have users scroll as little as possible is still relevant, but isn't nearly the firm rule that it once was. Years have passed, and people know how to scroll. They do it on Yahoo. They do it on Microsoft.com. They do it on Amazon. They do it on Google. They do it on Metafilter. The best way to develop a good interface is to follow those who have spent umpteen thousands of dollars developing theirs -- those are the interfaces that people are comfortable with. They're not the greatest. There are plenty of interfaces that are better. A fixed sidebar menu probably has significant advantages over a standard scrolling one. But that being said, consider that a Dvorak keyboard is considerably more efficient than a QWERTY keyboard. When was the last time that you saw a Dvorak keyboard?

oissubke

"The text should scroll, the links should not" is why frames were invented.

kindall

When was the last time that you saw a Dvorak keyboard? And I can't resist. All keyboards are Dvorak keyboards now, since all modern OSs let you choose a Dvorak layout in software.

kindall

Thanks, bobo123! That seems to be just what I'm looking for.

Termite

I have to agree with kindall — what you're doing sounds like exactly what frames were developed for.

hattifattener

The advantage of placing a left menu without frames is that visitors can bookmark/print/save individual pages within the site. Also if someone comes to one of your interior pages through a search engine the visitor will still see left menu, this won't happen if this is done with frames. I dislike frames, but I would hesitate to use a css hack for a professional site, personal maybe. That IE doesn't support "position:fixed" is a big peeve of mine. Another alternative I've seen is to create a box around your main text 500px high or so with the added "overflow:auto" property, so you'll have a box in the middle of your page you can scroll, not really what you asked for but it's another design possibility you could consider.

bobo123

As someone WHO ACTUALLY USES both style keyboards in a keyboard-intensive work environment (instead of just reading articles about them), I can testify that Dvorak is indeed more efficient. I'm not a partisan. I switch freely between both.

RavinDave

Just Added Q & A:

Find solution

For every problem there is a solution! Proved by Solucija.

  • Got an issue and looking for advice?

  • Ask Solucija to search every corner of the Web for help.

  • Get workable solutions and helpful tips in a moment.

Just ask Solucija about an issue you face and immediately get a list of ready solutions, answers and tips from other Internet users. We always provide the most suitable and complete answer to your question at the top, along with a few good alternatives below.