Position a div container on the right side

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>​ 

Answer 2

Just wanna update this for beginners now you should definitly use flexbox to do that, it's more appropriate and work for responsive try this : http://jsfiddle.net/x5vyC/3957/

#wrapper{   display:flex;   justify-content:space-between;   background:red; }   #c1{    background:blue; }   #c2{     background:green; }  <div id="wrapper">     <div id="c1">con1</div>     <div id="c2">con2</div> </div>​