clear floats example

by josketres

HTML

<div class="container">
   <div class="red box"></div>
   <div class="yellow box"></div>
   <div class="blue box"></div>
   <div style="clear:both;" /> <!-- this will clear the floats -->
</div>

CSS

.box {
    width: 100px;
    height: 100px;
    border-radius: 6px;
    float: left; 
}
.red { background-color: #d02b41;  }
.yellow { background-color: #ffcc52; }
.blue { background-color: #42afb7; }
.container { 
    background-color: #1a1a1a; 
    padding: 5px;
    border-radius: 6px;
}