Question

I’m creating my own theme for drupal, and would like it so when there is no sidebar, the content width is 100%, and when there is a sidebar, the content shrinks horizontally to allow room for the sidebar. Here’s an example of the structure:

<div id='container'>
   <div id='content'></div>
   <div id='sidebar'></div>
</div>

All I have managed to achieve so far is the image furthest right, where the content wraps around it.

I’d much prefer to do this using css only.

Answer 1

Insert the sidebar first in the markup and position it absolutely. Then use the adjacent sibling selector (+) to give the content a right margin when it follows a sidebar:

#sidebar {
    position: absolute;
    right: 0;
    width: 150px;
}
#sidebar + #content {
    margin-right: 150px;
}

Demo: http://jsfiddle.net/cH4ZY/2/