Member Offer
  1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Fixed Sidebar & Scrolling Content?

Discussion in 'Website Design Forum:' started by HippySunshine, Aug 29, 2009.

  1. HippySunshine

    HippySunshine Senior Member

    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!


  2. tim

    tim Senior Member

    using frames, but dont use frames.
  3. HippySunshine

    HippySunshine Senior Member

    is the only way to do it using frames?
  4. tim

    tim Senior Member

    i unno, probably not :p

    not helpful much, but i just wanted to say dont use frames ;)
  5. Renniks

    Renniks Senior Member

  6. Kevin

    Kevin 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:
  7. HippySunshine

    HippySunshine Senior Member

    Thats great guys, thanks for your help :D
  8. Mark Alexander

    Mark Alexander Senior Member

    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.

Share This Page