Question

When I applied float:left to a child div, the parent div compress automatically. I am writing my CSS code below :

 #footer_wrapper
{
    clear:both;
    background:#f0f0f0; 
    padding:15px 10px 10px 14px;
    border-top:1px solid #dcdcdc;
}
.footer
{
    width:950px;
    margin:0 auto;

}

.services
{
    float:left;
    width:250px;
}

HTML code :

<div id="footer_wrapper">

    <div class="footer">

        <div class="services">
        <h2>Our Services</h2>
            <ul>
                <li><a href="#">7sisters Online Magazine </a></li>
                <li><a href="#">7sisters Business Deals  </a></li>
                <li><a href="#">7sisters Yellow Pages </a></li>
                <li><a href="#">7sisters Air Tickets </a></li>
                <li><a href="#"> 7sisters Jobs </a></li>
                <li><a href="#"> 7sisters Career </a></li>
            </ul>
        </div>    

    </div>


</div>

When I removed float:left from class services the background shows full. Please help me. Can’t find the reason.

Answer 1

give the property overflow:hidden to the parent or put a <div style="clear:both"></div> after the last child.

An element with the float leave the flow of the document, with this two methods, the container actuate like the floats elements stay in the flow.

The clear method is perfectible, i just gave you a way: If tou search “clear the float css” …
Here for example