How to sit these div's side by side

How to sit these div's side by side

I have a 'container' that has either one or two div's in it: think
'content area' with optional 'sidebar'. The sidebar is on the right, the
content area on the left. When the sidebar appears it is a fixed width.
How can I get this to work without javascript, and without putting
additional tags or styles in the html on the fly?
Here's the basic code:
<div id='container'>
<div id='content-area'> ... </div>
<div id='sidebar' style='width: 200px;'> ...</div>
</div>
I tried simply floating one to the left, the other to the right, but in
that case the content still retains full-width, and is laid out once clear
of the sidebar. If I knew which pages the sidebar was going to appear on I
could give the container a class (on those pages only) and give the class
a fixed width. But I don't know which pages the sidebar will appear on!