These three boxes are “floated left”. A floated item is removed from the normal flow of text and pushed to the far left (or right) of the containing block (in this case, the <body> tag).

The CSS code for these boxes is

.box { 
    float: left; 
    border: 1px solid black;
    margin: 10px; 
    padding: 3px; }

The HTML is:

<div class="box">
...
</div>

Box 3

temi rolod mespi meroL

The same CSS has been applied to all three boxes by defining the layout rules as a class named “box”.

Notice how the above paragraph wraps to the right of the boxes, if the browser window is wide enough. If you want to prevent this from happening, define a CSS rule for the first element after the floated blocks: clear: both;. Defining clear makes sure there is nothing on the left, right (or both in this case) before starting the element. It has been applied to this paragraph. You can also apply it to the boxes themselves to prevent them building up horizontally.

Floated boxes will only pile up like this if there is room — try shrinking your browser window to see how they behave. Using floats can be good for making very flexible page designs that display well on small as well as large screens, as long as you intend for your layout to collapse when there isn't enough room! If you have a very strict layout design to follow (and you shouldn't — this is the web, not a brochure), then using absolute positioning is more precise, though generally less forgiving of screen width.