Question

I’m getting troubles with this issue for a long time. I believe that it’s a quite common problem for float layout and I wish someone would give a “standard” solution.

As title, the problem is about nested floats. Consider the following simple layout:

<div class='parent clearfix'>
     <div id='child1' style='float:left; width:500px'>
         { ... child 1 content goes here ... }
     </div>
     <div id='child2' style='margin-left:501px;'>
         { ... child 2 content goes here ... }
     </div>
</div>

Here clearfix is a common technique for auto clearing floated children. The problem is, the layout is broken if child2 contains another clearfix element. For example, if child 2 content is:

<div class='inside clearfix'>
    <div class='sub1' style='float-left; width:100px'> 
        { ... extra content goes here ... } 
    </div>
    <div class='sub2' style='margin-left:101px'> 
        { ... extra content goes here ... } 
    </div>
</div>

So generally, if we use clear:both inside a floated layout (inside the non-floated element), it also clears the parent container.

I know how to do it if using absolute position and a bit of js, but it’s not a good practice.

How to fix it using float?

Thanks!

Answer 1

you can also use overflow: hidden;

<div class="wrapper">
  <div class="float"></div>
  <div class="float"></div>
</div>

.wrapper{
 overflow: hidden;
}

.float{float: left;}

check demo on jsfiddle