Centering just the DIV instead of the sidebar too - css

Question

I have a header, a sidebar, and a content div.
The Header is docked to the top and fixed there. The sidebar is fixed the to the left. Now I have 3/4 of the screen on the right free of space. I have a content div that I want to place there. It needs to be centered in that 3/4 space.
Here is my code for the sidebar and content div.
CSS:
html,body {
height:100%;
}
#sidebar {
float: left;
width: 300px;
background: #fff;
background: rgba(225,225,225,0.2);
height:100%;
}
#sidebarTop {
height:100%;
background-color: #eee;
padding:20px 50px;
border-bottom:0.15em solid rgb(229,229,229);
background: rgba(225,225,225,0.25);
box-shadow: 0 2px 6px rgba(0,0,0,0.5), inset 0 1px rgba(255,255,255,0.3), inset 0 10px rgba(255,255,255,0.2), inset 0 10px 20px rgba(255,255,255,0.25), inset 0 -15px 30px rgba(0,0,0,0.3);
-o-box-shadow: 0 2px 6px rgba(0,0,0,0.5), inset 0 1px rgba(255,255,255,0.3), inset 0 10px rgba(255,255,255,0.2), inset 0 10px 20px rgba(255,255,255,0.25), inset 0 -15px 30px rgba(0,0,0,0.3);
-webkit-box-shadow: 0 2px 6px rgba(0,0,0,0.5), inset 0px 1px rgba(255,255,255,0.3), inset 0px 0px rgba(255,255,255,0.2), inset 0 10px 20px rgba(255,255,255,0.25), inset -10px 0px 0px rgba(0,0,0,0.3);
-moz-box-shadow: 0 2px 6px rgba(0,0,0,0.5), inset 0 1px rgba(255,255,255,0.3), inset 0 10px rgba(255,255,255,0.2), inset 0 10px 20px rgba(255,255,255,0.25), inset 0 -15px 30px rgba(0,0,0,0.3);
}
#content {
margin: 0 auto;
display:block;
width:400px;
margin-top:100px;
height:900px;
background:#FFF;
-webkit-box-shadow: 0px 0px 30px rgba(255, 255, 255, 1);
-moz-box-shadow: 0px 0px 30px rgba(255, 255, 255, 1);
box-shadow: 0px 0px 30px rgba(255, 255, 255, 1);
}
Here is my HTML code for sidebar and content div.
<div id="sidebar">
<div id="sidebarTop">
....
</div>
</div>
<div id="content">
TEST
</div>
The problem comes here. What happens is that instead of ignoring the sidebar and pushing the content div to 100px down (margin-top:100px), it brings the side-bar down to the same level too.
My goal is to center that div both vertically and horizontally in that 3/4 of screen space left after the sidebar and the header fill the rest.
Any help is much appreciated!

Answer 1

Add float:left; to #content.
#content {
margin: 0 auto;
width:400px;
margin-top:100px;
height:900px;
background:#FFF;
-webkit-box-shadow: 0px 0px 30px rgba(255, 255, 255, 1);
-moz-box-shadow: 0px 0px 30px rgba(255, 255, 255, 1);
box-shadow: 0px 0px 30px rgba(255, 255, 255, 1);
}
should be:
#content
{
margin:100px auto 0;
width:400px;
height:900px;
background:#fff;
-webkit-box-shadow:0 0 30px #fff;
-moz-box-shadow:0 0 30px #fff;
box-shadow:0 0 30px #fff;
float:left;
}
Updated:
CSS
html,
body
{
height:100%;
}
#sidebar
{
position:fixed;
top:0;
left:0;
width:300px;
height:100%;
background-color:#758;
}
#content
{
margin-left:-50px;
position:absolute;
top:100px;
left:50%;
width:400px;
height:900px;
background:#758;
}​
HTML
<div id="sidebar">
"fixed" sidebar
</div>
<div id="content">
"horizontally centered" content
</div>​
DEMO
Update 2:
CSS
#wrapper
{
position:absolute;
top:100px;
left:300px;
right:0;
height:900px;
}
#content
{
margin:0 auto;
width:400px;
height:100%;
background:#758;
}
HTML
<div id="sidebar">
"fixed" sidebar
</div>
<div id="wrapper">
<div id="content">
"horizontally centered" content
</div>
</div>​​​​​​​​​​
DEMO 2

Answer 2

You could try in this way:
CSS:
html,body {
height:100%;
}
#sidebar {
border: 2px solid yellow; /*Added to show the box-model*/
float: left;
width: 25%;
background: #fff;
background: rgba(225,225,225,0.2);
height:100%;
}
#sidebarTop {
border: 2px solid black; /*Added to show the box-model*/
height:100%;
background-color: #eee;
padding:20px 50px;
border-bottom:0.15em solid rgb(229,229,229);
background: rgba(225,225,225,0.25);
box-shadow: 0 2px 6px rgba(0,0,0,0.5), inset 0 1px rgba(255,255,255,0.3), inset 0 10px rgba(255,255,255,0.2), inset 0 10px 20px rgba(255,255,255,0.25), inset 0 -15px 30px rgba(0,0,0,0.3);
-o-box-shadow: 0 2px 6px rgba(0,0,0,0.5), inset 0 1px rgba(255,255,255,0.3), inset 0 10px rgba(255,255,255,0.2), inset 0 10px 20px rgba(255,255,255,0.25), inset 0 -15px 30px rgba(0,0,0,0.3);
-webkit-box-shadow: 0 2px 6px rgba(0,0,0,0.5), inset 0px 1px rgba(255,255,255,0.3), inset 0px 0px rgba(255,255,255,0.2), inset 0 10px 20px rgba(255,255,255,0.25), inset -10px 0px 0px rgba(0,0,0,0.3);
-moz-box-shadow: 0 2px 6px rgba(0,0,0,0.5), inset 0 1px rgba(255,255,255,0.3), inset 0 10px rgba(255,255,255,0.2), inset 0 10px 20px rgba(255,255,255,0.25), inset 0 -15px 30px rgba(0,0,0,0.3);
}
#foo {
border: 2px solid pink; /*Added to show the box-model*/
margin-top: 100px;
margin-left: 27%;
width: 73%;
}
#content {
border: 2px solid green; /*Added to show the box-model*/
margin: 0 auto;
display:block;
width:400px;
/*margin-top:100px;*/ /*this can be deleted*/
height: 100%;
background:#FFF;
-webkit-box-shadow: 0px 0px 30px rgba(255, 255, 255, 1);
-moz-box-shadow: 0px 0px 30px rgba(255, 255, 255, 1);
box-shadow: 0px 0px 30px rgba(255, 255, 255, 1);
}
And HTML:
<div id="sidebar">
<div id="sidebarTop">
....
</div>
</div>
<div id="foo">
<div id="content">
TEST
</div>
</div>

Answer 3

#sidebarTop {
margin: 0 auto;
}

Answer 4

You can simply use "center" tag like this:
<div id="content">
<center>
TEST
</center>
</div>