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!

    [​IMG]

    x
     
  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
    HTML:
    <body>
        <ul id="nav">
                <li>something</li>
                <li>something else</li>
                <li>something</li>
                <li>something else</li>
        </ul>
    
        <div id="container">
            <p>Lots of text required to see the effect.</p>
        </div>
    </body>
    
    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.
    Code:
    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
    x
     
  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