CSS side by side div with Pixel and Percent widths

Question

I have two div's (side by side) inside a parent div, i want right div to occupy 100% of remaining space (i.e. 100% - 200px) and should always stay next to left div (not below left div):

<div id="wrapper" style="width: 100%;">
    <div id="left" style="background-color: Blue; height: 100px; float: left; width: 200px;"></div>
    <div id="right" style="background-color: Aqua; height: 100px; float: left; width: 100%;"></div>
    <div style="clear: both;"></div>
</div>

Answer 1

The accepted answer is good, but I had an issue where the right column underlapped my subnavigation as it was floating as well.

With modern browsers you can now have all elements floating and get the same effect with cooler CSS. Using "width: calc(100% - 380px);" means you can float your elements, get them positioned properly, and look cool...

.container { float: left; width: 100%; }
.container__left { float: left; width: 380px; height: 100px; background: blue; }
.container__right { float: right; width: calc(100% - 380px); height: 100px; background: green; }

Demo http://jsfiddle.net/auUB3/1/