CODEWITHSUNDEEP
cssinternet-explorer-7floating
user1663417
user1663417

Reputation: 31

Float left and float right in a div container having width:100% IE7

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 |
#-#-    |~~~~~~~~~~~~|. . . . . . . . . . . . . . . .|~~~~~~~~~~~~~|
#-#-
#-#-#-#-#-#-#-#-#-#-#-#--#-#-#-#-#-#-#-#-#-#-#-#--#-#-#-#-#-#-#-#-#-#-#-

Upvotes: 3

Views: 7451

Answers (1)

barbajoe
barbajoe

Reputation: 547

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.

Upvotes: 2

Related Questions