Geek asks and answers

<div> is compressed when a float is applied to its subitems

I am trying to create an element container in the main container of my website. To create a container of elements in a row, I applied to them float:left;. But when I added to them float, the main container shrinks! I tried applying clear:bothto the main container, but nothing has changed.

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>

enter image description here

+5
source share
4 answers

Try adding:

overflow: auto;

to #main_container

The EDIT: . As an alternative method of cleaning the fleet, you can use: after, as described here .

+8
source

Add overflow: hidden;to main container -

#main_container
{
    clear:both;
    margin-top:20px;
    padding:20px 10px 30px 15px;
    background:#ccc;
    overflow: hidden;
}
+1
source

div 100%. , .

0

,

<div id="main_container">

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

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

    <div class="element_container"></div>
  <div class="" style="clear:both;"></div> //  add this in your html 
</div>

Overflow

#main_container{
overflow:hidden;
}
0

More articles:


All Articles