3

I want to float two divs in a container-div in IE7. The first div in the container should float to left, the second to right. Actually the two divs are floated to left in my css config.

Here is my css:

.container {float:left; width:100%; height:30px;}
.left {float:left; width:auto; height:30px;}
.right {float:right; width: auto; height:30px}

Here is my HTML

<div class="container">
    <div class="left">To the Left!</div>
    <div class="right">To the Right!</div>
</div>

This should be the Result: (dots are the spaces here ;) )

#-#-#-#-#-#-#-#-#-#-#-#-#-# Container -#-#-#-#-#-#-#-#-#-#-#-#-#-#-#-#-#
#-#-
#-#-    |~~~~~~~~~~~~|. . . . . . . . . . . . . . . .|~~~~~~~~~~~~~|
#-#-    |To The Left | . . . . . . . . . . .  . . . .|To the Right |
#-#-    |~~~~~~~~~~~~|. . . . . . . . . . . . . . . .|~~~~~~~~~~~~~|
#-#-
#-#-#-#-#-#-#-#-#-#-#-#--#-#-#-#-#-#-#-#-#-#-#-#--#-#-#-#-#-#-#-#-#-#-#-
user1663417
  • 31
  • 1
  • 2
  • I do not use IE7, but it works fine [here in fiddle](http://jsfiddle.net/fmsmK/). So my guess is add a `margin-right:` to the `.left` `div` – cube Sep 11 '12 at 16:41
  • 1
    I think this is the same (or similar) question as this http://stackoverflow.com/questions/187279/strange-float-behaviour-in-ie7 – Fred Sep 11 '12 at 16:41

1 Answers1

2

replace

.container {float:left; width:100%; height:30px;}

with

.container {width:100%; height:30px;}

your container classes "float:left;" is taking precedence over the other floats. you could alternatively edit your other classes to 

.left {clear: both; float:left; width:auto; height:30px;}
.right {clear: both; float:right; width: auto; height:30px;}

which should clear out float left from the container class before implementing the new floats.

barbajoe
  • 547
  • 5
  • 15
  • 2
    The children should be positioned relative to their container (you may need to explicitly add `position:relative` to the container). Adding the float to the container should not take precedence over anything, and should ensure that the container expands to hold the floated children (in the same way a clearfix would). I would invert the order to keep the right floated element before the left floated (not that that matters to this issue), but you should certainly not have to remove the `float` from the container. – Matt Whipple Sep 11 '12 at 16:47
  • I agree that you shouldn't have to take out the original float, which is why I suggested the clear:both; option. I also know that the original code that user1663417 used works in IE 9, but since I don't have IE 7 I can't make extensive tests, and the clear:both; option has always worked for me. – barbajoe Sep 11 '12 at 16:53
  • 3
    The information about "clear(ing) out float left" from the container class is entirely misleading however. That's not what `clear` does, and doesn't sound like its relevant for this issue. – Matt Whipple Sep 11 '12 at 16:56