How to center a fixed div inside another div? - html

Question

I have one main div that should make the page scrollable. On either side of this div there is a sidebar. The only difference I want from how it is now, is that the sidebars should always stay on top (position: fixed;)
I've tried everything, but it doesn't work. If I put position: fixed; on the .fixed, the width is no longer 100 % but the width of the actual contents inside. If I put on width: 100% the width turns 100 % of the viewport.
Is this even possible with just CSS?
JSFiddle: http://jsfiddle.net/6yWNv/
Sidebar 1
<div id="wrapper">
<div class="contents">
<p>Lorem ipsum dolor sit amnet.</p>
</div>
</div>
<div class="sidebar">
<div class="contents">
<div class="fixed">
Sidebar 2
</div>
</div>
</div>
html, body {margin: 0; padding: 0;}
#wrapper {
width: 54%;
float: left;
background: #0FF;
}
.sidebar {
width: 23%;
float: left;
}
.sidebar .contents {
margin: auto;
background: #F00;
min-width: 100px;
width: 55%;
height: 100px;
}
.sidebar .contents .fixed {
background: #0F0;
}

Answer 1

The trick is to set position:fixed on the sidebar (with left:0 and right:0 respectively) and then add margin-left:23% to #wrapper:
#wrapper {
width: 54%;
margin-left: 23%;
background: #0FF;
}
.sidebar {
width: 23%;
position: fixed;
left:0; top: 0;
}
#wrapper + .sidebar { /* target second sidebar */
left: inherit; /* reset left */
right:0;
}
if you want the green sidebars to stay in place, but the red boxes to move away, then something like this should work:
.sidebar {
width: 23%;
float: left;
position: relative; /* so sub-containers are relative to sidebar */
}
.sidebar .contents {
margin: auto;
background: #F00;
min-width: 100px;
width: 100%; /* relative to sidebar */
height: 100px;
}
.sidebar .contents .fixed {
background: #0F0;
position: fixed; /* starts a new context... */
width: 23%; /* so this is not relative to sidebar *.
}

Answer 2

Not possible with just CSS. When you make an element fixed, it removes it from its "context" and makes its new "context" the document. That's why specifying width: 100% on the position: fixed element spans the page.
Edit: I'm assuming that you want the green sidebars to stay in place but the red boxes to move away as you scroll (I'm making this assumption because of the way you've named your classes on your page).

Answer 3

you need to fix the sidebar, not its contents.
Just remove the float and set the position fixed to top and right
.sidebar {
width: 30%;
position: fixed;
top:0;
right:0;
}