CSS: floats on multiple lines

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>

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.

This entry was posted in by Gabriele Romanato. Bookmark the permalink.

Leave a Reply

Note: Only a member of this blog may post a comment.