CSS clear only inside parent div

Question

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 1

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>