Containing div smaller than children

This is because floats are not part of the layout until they are cleared.


You need to clear your floats. You can do this via a clearfix class: 

.clearfix:before,
.clearfix:after {
    content: " "; 
    display: table; 
}

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1;
}

#container {
    border:solid 3px red;
}

#left {
    float: left;
    background-color: lightblue;
    height: 300px;
}

#right {
    float: left;
    background-color: coral;
    height: 300px;
}
<div id='container' class="clearfix">
    <div id='left'>Left content</div>
    <div id='right'>Right content</div>
</div>

or a clearing element:

.clear {
  clear:both;
}

#container {
    border:solid 3px red;
}

#left {
    float: left;
    background-color: lightblue;
    height: 300px;
}

#right {
    float: left;
    background-color: coral;
    height: 300px;
}
<div id='container'>
    <div id='left'>Left content</div>
    <div id='right'>Right content</div>
    <div class="clear"><!-- --></div>
</div>

Updated Fiddle: http://jsfiddle.net/JCPEH/5/


A float like some other "commands" (like position relative/absolute/fix) removes the element from the normal rendering flow.
One result, it is no longer affecting it's parent element way of rendering.

You can enlighten yourself here

Tags:

Css

Recent Posts