Float Problem

Case as below.

<div class="non-floated-parent" style="background-color:#333; border:1px solid #900;">
 <div class="floated-child" style="float:left; width:200px; height:200px; background-color:#000;">
    This is a floated element as "float:left; width:200px; height:200px; background-color:#000;"
 </div>
</div>
This is a floated element as “float:left; width:200px; height:200px; background-color:#000;”





Solution 1. Use The clear fix

<div class="non-floated-parent" style="background-color:#333; border:1px solid #900;">
 <div class="floated-child" style=" float:left; width:200px; height:200px; background-color:#000;">
    This is a floated element as "float:left; width:200px; height:200px; background-color:#000;"
 </div>
 
 <div style="clear: both; "></div>
 
</div>
This is a floated element as “float:left; width:200px; height:200px; background-color:#000;”





Solution 2. Use The overflow method

<div class="non-floated-parent" style="background-color:#333; border:1px solid #900;  overflow:hidden;">
 <div class="floated-child" style=" float:left; width:200px; height:200px; background-color:#000;">
    This is a floated element as "float:left; width:200px; height:200px; background-color:#000;"
 </div>
</div>
This is a floated element as “float:left; width:200px; height:200px; background-color:#000;”

Posted in CSS


Categories

Archives