I need to align two divs within a container-div in IE7. The first div should float to the left, and the second to the right. Currently, both divs are floating to the left according to my CSS configuration.
Here is the CSS code I'm using:
.container {float:left; width:100%; height:30px;}
.left {float:left; width:auto; height:30px;}
.right {float:right; width: auto; height:30px}
And here is my HTML code:
<div class="container">
<div class="left">To the Left!</div>
<div class="right">To the Right!</div>
</div>
Expected Result (spaces represented by dots):
#-#-#-#-#-#-#-#-#-#-#-#-#-# Container -#-#-#-#-#-#-#-#-#-#-#-#-#-#-#-#-#
#-#-
#-#- |~~~~~~~~~~~~|. . . . . . . . . . . . . . . .|~~~~~~~~~~~~~|
#-#- |To The Left | . . . . . . . . . . . . . . .|To the Right |
#-#- |~~~~~~~~~~~~|. . . . . . . . . . . . . . . .|~~~~~~~~~~~~~|
#-#-
#-#-#-#-#-#-#-#-#-#-#-#--#-#-#-#-#-#-#-#-#-#-#-#--#-#-#-#-#-#-#-#-#-#-#-