CSS is cleared only inside the parent div

Question

Here is a sample code of what I'm 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 contents inside the divs bottom_div1 and bottom_div2 to appear in the right div below the row 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 small blocks. Any help would be greatly appreciated!

Answer 1

Just add overflow: hiddensmall divs to the container.

WHY DOES IT WORK?

overflow: hidden ( , ) " , divs .

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

Hide result

Answer 2

display: inline-block .small div, :

.small div {display: inline-block; padding:10px; border: 1px solid #aaa}

clear bottom_div1 bottom_div2. , .

Answer 3

You almost got it. You just need to rebuild your divs and styles a bit. Compare the snippet below with the initial setting and identify the differences:

.left-div {
float:left;
width:220px;
height:300px;
border: 1px solid #aaa;
}

.right-div {
float:left;
width: 300px;
}

.small div {
float:left;
padding:10px;
border: 1px solid #aaa;
}

#bottom_div1,
#bottom_div2 {
clear: left;
}

<div class="parent-div">

<div class="left-div">
Left div<br>
float:left<br>
fixed width 220px
</div>


<div class="right-div">
Right div.<br>
Only styles are float:left and width: 300px<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 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> <!-- End of .right-div -->
	
</div> <!-- End of .parent-div -->

Run codeHide result