Creating a centered div with a relative-fixed sidebar

HTML & CSS
1

Hi-

I want to create a page with a centered div, and sticking to the right side of the central dive I want a fixed sidebar that scrolls alongside the central div. I (kind of)have done this by first creating a central div with position:relative, then adding an absolutely positioned div as the sidebar, then nesting a fixed position div in the absolute div.

This kind of works - at least structurally, but it messes up the css in both divs. I’ve seen this done befor - so I know it can be done - but obviously this isnt the right way.

Can anyone guide me in the right direction?

Here’s my current code:


#centraldiv {
	width: 800px;
	background-color: #FFF;
	position:relative;
	margin: 0 auto;
}

#sidecontainer {
	position:absolute;
	top: 100px;
	right: 0;
}

#sidecontainer div{
	position: fixed;
	background-color:#999;
	width: 200px;
	height: 500px;
}

Thanks!!!

2

You should be able to do this. Just give this one div position fixed. Don’t give it any top/left/right/bottom values. And push it over to the right with margins. Paul OB has an article on searchthis about the technique. Let me see if I can find it…

Here I think this is it http://www.search-this.com/2008/07/14/fix-your-css/

3

This kind of works - at least structurally, but it messes up the css in both divs. I’ve seen this done befor - so I know it can be done - but obviously this isnt the right way

That looks as though it will work but what problems are you seeing?

Fixed positioning is a tricky subject and has very limited use. The element needs to be high in the viewport (or fixed to the top or bottom) to work best. Once a fixed element is outside the viewport is is unreachable.

4

Hi - thanks for the responses!!!

Eric:
Thanks so much for the link!
It did help and everything did work correctly this way(with one caveat):


#centraldiv {
	width: 800px;
	background-color: #FFF;
	position:relative;
	margin: 0 auto;
}

#sidecontainer {
	position: fixed;
	background-color:#999;
}

}

But watch out bc the sidebar div must go before anything else in the central div or it gets buggy.

This does not work:
<central div>
Lots of words
<sidebar>
</central>

but this does:
<central div>
<sidebar>
Lots of words
</central>

Paul: With the previous code, the layout worked like a charm, but it blew out
the background color, rounded corners, transparency, and it made the objects in the sidebar overlap themselves…

Thanks again for the help!!!

5

Yes the sidebar is using auto positioning so you need to make sure that it’s in the right place before you then fix it.

It is tricky and there are bugs but it seems you have worked it out ok :slight_smile: