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!