How can I implement a fixed sidebar?

Question

I have a situation like this:

<!DOCTYPE HTML>
<html>
    <head>
        <title>test</title>
    </head>
    <style>
        #wrapper { width: 1100px; margin: 0px auto; }
        #wrapper #stream { width: 790px; float: left; border: 1px solid red;  }
        #wrapper aside { width: 270px; float: left;  border: 1px solid red; }
    </style>
    <body>
        <section id="wrapper">
            <section id="stream">
                some text...
            </section>
            <aside>
                <ul>    
                    <li>something</li>
                    <li>something</li>
                    <li>something</li>
                    <li>something</li>
                </ul>
            </aside>
        </section>
    </body>
</html>

and I don't want the sidebar to move even if the page scrolls down.

I tried setting the aside's position to fixed but so I can't set properly the distance from left.

I found a solution with jQuery:

$(document).ready(function () {
    $(window).scroll(function () {
        $("aside").css('top', $(window).scrollTop()+'px');
    });
})

but with Chrome and Safari the scroll of the aside is piecewise.

Any help?

========================

SOLUTION:

<!DOCTYPE HTML>
<html>
    <head>
        <title>test</title>
    </head>
    <style>
    #wrapper {

        width: 1100px;
        margin: 0px auto;
    }
    #stream {
      width: 800px;
      background: #ccc;
      float: left;
    }
    #sidebar {
    float: left;
      border: 1px solid red;
      width: 200px;
    }
    aside {
      position: fixed;
      top: 20px;
      border: 1px solid red;
    }
    </style>
    <body>
    <section id="wrapper">
        <section id="stream">
                some text...
        </section>
        <section id="sidebar">
          <aside>
                <ul>    
                    <li>something</li>
                    <li>something</li>
                    <li>something</li>
                    <li>something</li>
                </ul>
          </aside>
        </section>
    </body>
</html>

I'm a little confused as to why the fixed position didn't work? Can you show the CSS you tried and tell us why you didn't get it to work? (Note that you can edit your question to add details.) — Jeroen, Mar 22 '13 at 08:28
If you have problem with setting proper distance from left, just don;t set it. Ithink it might be similar to [this example](http://stackoverflow.com/questions/15430320/fixed-div-next-to-parent-div/15431083#15431083). — nd_macias, Mar 22 '13 at 08:33

score 1 · Answer 1 · answered Mar 22 '13 at 08:27

1

In order to use the top, right, bottom or left properties, you have to set the object's display property to absolute, relative or fixed.

Either way, by setting position: fixed; it won't move when you scroll.

answered Mar 22 '13 at 08:27

Tim S.

13,597
7
46
72

I think that setting `position: fixed` **will move element** when scrolling. – nd_macias Mar 22 '13 at 08:30
Thanks to nd_macias I've found a simple solution that works for me! I have added it to the question. – Gnamm Mar 22 '13 at 09:19
@nd_macias uuhhm... no. `position: fixed` will fix an element on the screen. `position: absolute` will allow you to set an element relative from it's parent, and `position: relative` sets an element relative from it's current position. – Tim S. Mar 22 '13 at 09:59
Check out this [fiddle](http://jsfiddle.net/uxNdD/). – Tim S. Mar 22 '13 at 10:03
@Tim S. Ok, I guess there's a bit of misunderstanding, because that is exactly what I mean by "it will move", although I meant "it will move relatively to other elements". :) – nd_macias Mar 22 '13 at 10:05
@nd_macias I am very confused right now :p – Tim S. Mar 22 '13 at 10:45
@Tim S. What I meant is that we both meant the same. :) – nd_macias Mar 22 '13 at 10:50

How can I implement a fixed sidebar?

1 Answers1