These three boxes have been positioned absolutely. The code for them appears after this paragraph in the source, but because of absolute positioning, they are lifted out of the flow of the text and placed relative to their containing block.
A quick note: containing blocks are any block element that have
themselves been positioned. If there is no containing block, positioning
will be relative to the browser window (or rather the
<html> element,
which amounts to the same thing unless you do something silly like give it
margins or borders).
Using absolute positioning isn't always a very good idea. In this example, it's a terrible idea. The columns are fixed in place, but their widths vary. If the browser window gets too small, you end up with three unreadable columns and because they also have fixed height, text often overflows the boxes.
So what can you do? If you give a width in pixels instead of percent, then the boxes will overlap at small screen sizes, and if you use pixels instead of percent for the positioning as well as the width, then you end up with a design that's of completely fixed size, which is inflexible and doesn't react well to people making their font bigger. On the other hand, your design will remain intact. The answer of course is to avoid this kind of situation entirely, or design a rigid layout that looks good on a majority of your visitors' browsers. Try to stick to the former; there are plenty of ways to lay out a page without alienating your visitors.
On the other hand, using absolute positioning can be a very good way of
creating a beautiful, flexible design without using tables or unnecessary
<img> tags.
The CSS code for these boxes is
#box1, #box2, #box3 {
position: absolute;
border: 1px solid black;
padding: 3px;
height: 200px; width: 20%;
top: 20px;
}
There are three boxes. The red one on the left is #box1, this is #box2, and the blue box is #box3. The code to the left is common to all boxes, but the positioning is specific to each box. The CSS for that is next.
#box1 { left: 15%; background-color: #FFCCCC;}
#box2 { left: 40%; background-color: #CCFFCC;}
#box3 { left: 65%; background-color: #CCCCFF;}