<div> shrinks when float is applied to its sub elements

Question

I am trying to make an element container within the main container of my website. To make the element container in a line, I applied float:left; to them. But when I added float to them,the main container shrinks! I tried applying clear:both to the main container, but nothing changes.

CSS :

#main_container
{
    clear:both;
    margin-top:20px;
    padding:20px 10px 30px 15px;
    background:#ccc;
}
.element_container
{
    float:left;
    width:238px;
    height:300px;
    border:1px solid #000;
}

HTML :

<div id="main_container">

    <div class="element_container"></div>

    <div class="element_container"></div>

    <div class="element_container"></div>

</div>

Answer 1

Try adding:

overflow: auto;

to #main_container

EDIT: As an alternative float clearing method you can use :after, as explained here.