How do I get this div to float further to the left than this other div?

Really simple question time:

I have two divs.

<div id="1">
  <p>hello</p>
</div>
<div id="2">
  <p>goodbye</p>
</div> 

#1 is floated to the 开发者_JAVA百科left. #2 is floated to the left. what can I do, short of changing the HTML to push #2 to the left of #1? I am aware of a solve using absolute and relative positioning but it would be super if there were a way to do it a more 'dynamic' way (like float)

Use float:right and an outside container

CSS

 #outside { float: left }
 #a { float:right }
 #b { float:right }

HTML:

 <div id="outside">
   <div id="a">
     <p>hello</p>
   </div>
   <div id="b">
     <p>goodbye</p>
   </div> 
 </div>

Why don't you simple float right the first div?

http://jsfiddle.net/notme/2w4Ch/

Note: ID's cant begin with numbers. Just remove the float left for id 'one'

#one{}
#two{float: left}