Make a floated div scroll up/down with page?

Question

I've got your stereotypical two column (1 content, 1 sidebar) layout with each column floated opposites and all that. But I need my sidebar to scroll with the page. My first instinct was to use position:fixed , not realizing it would mess up my floats. So I'm not really sure what to do. I'd rather not absolute position the two columns if I can avoid it. This website is more or less completely coded and I only found out about the need for the sidebar to scroll in the last leg of the process. So it's kind of a PITA to do too much to it.

So essentially I need a way to make a floated DIV to act as though it's under the affects of position:fixed

My thought was ideally maybe a javascript/jQuery solution that just latches onto the div and makes magic happen? But I'm open to a CSS solution if it's a quick/easy one.

Answer 1

I'm guessing that your problem with making the sidebar position: fixed is that it takes it out of the flow, so your main content shifts over to the left, under the sidebar. If that's a correct interpretation, then add margin-left to the main content with the same width as the sidebar, eg:

.sidebar {
    position: fixed;
    width: 200px;
}
.content {
    margin-left: 200px;
}

With only two columns, there's no need to float the main content. Adjust as needed for your particular situation (eg change units to em or whatever).