How can I float 1st div to left and the 2nd to the right?

Question

I have a DIV with two update panels inside of them. The update panels render as divs but asp.net does not let me assign a class to a div. I can do this using jQuery by assigning css to the first child, then assigning different css to the 2nd or las child. Can I do this purely with css? Something similiar to this.

.outerdiv div { width:45%; }

/*float:left */ .outerdiv div(0) { float:left; }

/*float:right */ .outerdiv div(1) { float:right; }

Any help is appreciated. Cheers, ~ck in San Diego

Answer 1

Or you can wrap the Update Panel DIVs with another DIV...

<div class="outerdiv">
  <div class="outerdivleft">
    ... Update Panel Left ...
  </div>
  <div class="outerdivright">
    ... Update Panel Right ...
  </div>
</div>

Answer 2

While this doesn't scale to more divs than 2, you can use:

.outerdiv div { float: right; }
.outerdiv div:first-child { float: left }

Answer 3

Assuming that .outerdiv only contains those two div's, this should work in most modern web browsers:

.outerdiv div:first-child {float:left;}
.outerdiv div:last-child {float:right;}