Question

I want to develop some kind of utility bar. I can position each element in this bar side by side using float:left;

But I want the second element to be positioned at the very right of the bar. This is hard for me because the width of the bar is not static.

Have a look at my demo: http://jsfiddle.net/x5vyC/2/

It should look like this:

Any idea how to achieve this using css?

Answer 1

Is this what you wanted? – http://jsfiddle.net/jomanlk/x5vyC/3/

Floats on both sides now

#wrapper{
    background:red;
    overflow:auto;
}

#c1{
   float:left;
   background:blue;
}

#c2{
    background:green;
    float:right;
}​

<div id="wrapper">
    <div id="c1">con1</div>
    <div id="c2">con2</div>
</div>​