Phantom Lord Phantom Lord - 4 months ago 13
CSS Question

CSS clear only inside parent div

Here is the sample code of what I am trying to do

<div>
<div style="float:left; width:220px; height:300px; border: 1px solid #aaa">
Left div <br>float:left <br> fixed width 220px
</div>

<div>
Right div. <br>No styles<br> Takes remaning width <br><br>
There are some small blocks (one - four) with "float:left"


<div class="small">
<div>one</div>
<div>two</div>
<div>three</div>
<div>four</div>
</div>

<div>
<div id='bottom_div1'>Some content which needs to appear below small blocks</div>
<div id='bottom_div2'>Some content at the bottom, which needs to appear below small blocks</div>
</div>

</div>

</div>


Working fiddle here

I need the content inside the divs bottom_div1 and bottom_div2 to appear in the right div below the line of small blocks ("one" - "four").
However with "clear:both" it appears below the left div, and with "clear:none" it appears to the right of the small blocks. Any help will be much appreciated!

Answer

Just add overflow: hidden to the container of small divs.

WHY IT WORKS?

overflow: hidden (and values other than visible) creates a "block formatting context" so all floating divs are now contained inside and floating no longer affects the flow.

.small div {float:left; padding:10px; border: 1px solid #aaa}
.small {overflow: hidden}
<div>
    <div style="float:left; width:220px; height:300px; border: 1px solid #aaa">
        Left div <br>float:left <br> fixed width 220px
    </div>

    <div>
        <div>Right div. <br>No styles<br> Takes remaning width <br><br> There are some small blocks (one - four) with "float:left"</div>
    </div>

    <div class="small">
        <div>one</div>
        <div>two</div>
        <div>three</div>
        <div>four</div>
    </div>

    <div id='inner-footer'>
        <div id='bottom_div1'>Some content at the bottom, which needs to appear below small blocks</div>
        <div id='bottom_div2'>Some content at the bottom, which needs to appear below small blocks</div>
    </div>
</div>