• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.

Fixed Sidebar & Scrolling Content?

Ive drawn a blank!

How do I get my sidebar to stay put and my content scroll?
Ive done it before and I know how... I just cant remember how... maybe its too early in the morning, I dont know! But I need help!



Senior Member
No, you can do it without frames. So, with your specific layout. Here is your markup
    <ul id="nav">
            <li>something else</li>
            <li>something else</li>

    <div id="container">
        <p>Lots of text required to see the effect.</p>
Don't forget to add a reset to your stylesheet!
The way you need to style it, is by setting your <ul> to be fixed at the center of your screen (horizontally). Then you can add negative margins to the left, to position it to the right distance away from your content box.
ul#nav {            color:#ff0000;            padding:0; margin:0; /* [B]this rule isn't necessary if you used a reset */[/B]            position:fixed; [B]/* so it stays in the same position on the screen */[/B]            top:200px; left:50%; [B]/* define the vertical position in pixels --> left:50% will center it horizontally */[/B]            margin-left:-500px; [B]/* define the exact horizontal position with margins */[/B]            }
Then you can style your container however you want... I suggest you style the container before you position the navigation!
I'm just assuming that you know HTML/CSS and that you don't need help with resetting and styling your body? :blink:
Onartis, it seems like you've made it needlessly complex. Why didnt you just top: 0; left: 0; and then use margin-left on the content wrapper instead of mixing fixed and fluid units and negative margins. Maybe I'm not seeing something.

Edit: Wait I totally necro-posted, how did that happen. I think I'm being helpful though so I'm not sure if I should delete or not in case someone searches for this later.