css - Shrink the content div if floated sidebar exists to keep side-by-side -

i have 'container' has either 1 or 2 div's in it: think 'content area' optional 'sidebar'.

the sidebar on right, content area on left. when sidebar appears fixed width.

how can shrink content container keep columns side-by-side without using javascript, , without putting additional tags or styles in html on fly?

here's basic code:

<div id='container'>    <div id='content-area'> ... </div>    <div id='sidebar' style='width: 200px;'> ...</div> </div> 

i tried floating 1 left, other right, in case content still retains full-width, , laid out once clear of sidebar.

if knew pages sidebar going appear on give container class (on pages only) , give class fixed width. don't know pages sidebar appear on!

by using css adjacent sibling selector #sidebar + #content-area target content area , apply right margin if sidebar exists within container:

example here

#sidebar { float: right; width: 200px; }  #sidebar + #content-area {   margin-right: 200px; /* equal width of sidebar */ } 

5.7 adjacent sibling selectors

adjacent sibling selectors have following syntax: e1 + e2, e2 subject of selector. selector matches if e1 , e2 share same parent in document tree , e1 precedes e2, ignoring non-element nodes (such text nodes , comments).

in case have reorder elements follows:

<div id="container">     <div id="sidebar"> sidebar </div>     <div id="content-area"> content. </div> </div> 

---

alternatively, prevent content area overlapping margin box of floated sidebar establishing block formatting context.

css level 2 spec sates:

the border box of table, block-level replaced element, or element in normal flow establishes new block formatting context (such element 'overflow' other 'visible') must not overlap margin box of floats in same block formatting context element itself.

therefore giving content area overflow-x property value of hidden (for instance), shrink left side of sidebar floated right.

example here

#content-area { overflow-x: hidden; } #sidebar { float: right; width: 200px; }