Creating a fixed width sidebar with a responsive container for content next to it in CSS

Question

I have a fixed width container (200px) on the left of the page with a responsive container on the right for content.

I'd like the content to be centered in the container on the right and have done so using the following CSS:

.sidebar {
width: 10%;
position: fixed;
height: 100%;
background-color: red;
}

.parent {
position: relative;
width: 90%;
height:auto;
margin-left: 10%;
border: 2px solid #000;
}

#kid {
width: 75%;
margin: 0 auto;
border:2px solid #f00;
}

How can I replicate this behaviour using a fixed width for the sidebar (200px)? JSFiddle: http://jsfiddle.net/Dnjwa/1/

Any help is appreciated, thanks!

Answer 1

You can accomplish this using the CSS calc function. For example:

.parent {
    width: -webkit-calc(100% - 200px);
    width: calc(100% - 200px);
}

See updated fiddle .
calc support .

If you don't want to use calc it can be accomplished with padding, although there are some considerations if you want to use this method. See fiddle .