May 21, 2005

A Challenging CSS Layout Well, at least for me. How do I do a sidebar that stays put?

I am charged with making This Fit within a standard look that generally looks like This. As you can see, in the first link, the left sidebar stays put with the help of frames and contains a valuable legend. The new page should do this as well but I am trying to stick to positioning without frames and tables. Ideally, I would like to create a three column layout between a header and a footer that looks like my standard but has a div within the left div that travels with you as you scroll... sort of like the header does on about.com but more useful and less annoying. How would I go about doing this?

posted by Hotcakes 18 years ago
  • You're wanting the sidebar to scroll down the screen with the user, right? I'm hell and gone from being an expert on this, but I'd say CSS probably won't be enough. Something like this sounds like it'll require some js and/or dhtml.
  • there is such a thing as position: fixed, but that doesn't work in IE. JS will work, if poorly. I just did a google search for position: fixed and got this page. I wonder if that might be helpful.
  • Fixed Positioning for Windows Internet Explorer Fixed Sidebars Dean Edwards' IE7 should also enable position:fixed
  • If ye seek t'know how to make the floating dealies, ye are commanded to quest into The Floatutorial.
  • Oh, travels as you scroll? I dunno how to do that. And those bug the [expletive] out of me besides..
  • I have seen it done but its gonna be a lot of testing on different browsers, and it wont work at all on older ones, and yeah, its annoying looking. Why not just use a frame? Its a simple solution that works on any browser.
  • Frames are deprecated and no longer considered standards compliant markup, and a whole lot of people don't like 'em for navigation. Minor points, maybe, and that is a simpler solution.
  • I didn't want to use a frame because it's not within the standard look but I'm now thinking a scrolling sidebar would be worse. I'm going to revamp the frame and bring the rest in line with the standard and, if the standards folks squawk, I'll hyperventilate and avoid justifying by passing out. Thanks for the opinions and the links.
  • Seems to me you could make the whole page be the size of a page, and just make the part with the long text in it scroll. You could put it in a scroll box. Then the page itself doesn't scroll, just that section of it. And the sidebar stays.
  • how would I do that? My standard layout is meant to just keep going to fit any amount of content. Would I designate a length then set overflow in the main content area to scroll? Am I talking out of my ass?
  • That's what I do. I layout the sections on the page by percentages, then set overflow to auto or scroll on the parts that will have varying amounts of information in them. With CSS you can either include the header and footer in the scrolling section or leave them separate on the top and bottom, and they'll always be visible as well. In which case the main content div would have height:80% or something. However the layout worked out.
  • I mean, the CSS bit is what I do... I also do a good bit of talking out of my ass, but I'm trying not to here. :)
  • Does this dude's comment box do what you want?