One of the main characteristics of CSS floats is the computation of space performed by browsers. When there's no more room available on a line, exceeding floats are automatically moved to the next line. And so on. We can take advantage of this fact by implementing a system that, given a stated width for each line, automatically pushes floats on the next line, thus keeping our layout organized. For example, given the following structure:
<div id="container"> <div class="float"></div> <div class="float"></div> <div class="float"></div> <div class="float"></div> </div>
we can write the following CSS code:
#container {
width: 400px;
overflow: hidden;
}
.float {
float: left;
width: 200px;
height: 200px;
}
Each float is 200 pixels wide, so on each line there will be only two floats. You can see the result below.
