Emulating a fixed sidebar template issues

Question

am trying to emulate this theme:

http://themetrust.com/demos/ink/?project=the-city-of-samba

But instead make the blog post always remain centered in the right hand side (space outside of the fixed sidebar) and have the blog post be of a % width.

I currently have this set up on my site, but am using a percentage based sidebar which looks awful.

Here is a JSfiddle recreating in basic terms the theme from above:

http://jsfiddle.net/Uyv6w/4/

All i am after is to make that grey inner div always remain centered inside the red content div.

Incase JSFiddle goes down and for future ref:

HTML:

<div id="container">
    <div id="sidebar"></div>
    <div id="content">
        <div id="inner"></div>
    </div
</div>

CSS:

* {
  margin: 0; padding: 0;
}

html, body {
  width: 100%;
  height: 100%;
  background-color: #333;
}

#container {
  height: 100%;
  width: 100%;
}

#sidebar {
  height: 100%;
  width: 100px;
  background-color: #9b59b6;
  position: fixed;
}

#content {
  width: 100%;
  background-color: #f00;
}

#inner {
  width: 60%;
  margin-left: 150px;
  background-color: #888;
  height: 1000px;
}

Thanks.

Answer 1

There are just 2 properties to change in ordre to make this work the way you want :

#content {
    /* width: 100%; */
    margin-left: 100px; /* the width of you sidebar.
                            Since #content is a div, a block-level element
                            , its width will be automatically 100%
                            , minus the margins */
    background-color: #f00;
}

#inner {
    width: 60%;
    /* margin-left: 150px; */
    margin-left: auto;
    margin-right: auto; /* having margin-left & right set to auto will center your div.
                            you could also use "margin: 0 auto" */
    background-color: #888;
    height: 1000px;
}

I have updated you JSFiddle example here : http://jsfiddle.net/Uyv6w/5/

Answer 2

http://jsbin.com/requv/1/edit

if you set body, html (and the container) to height 100%, it will not be able to to scroll. the height should be more then 100%.