Creating a simple three-column design

Starting at the end

Since you're beginning where the companion article to this tutorial ended, have a look at that layout. Figure 1 shows the index.html file contained in the starter_files folder within the sample files linked to at the beginning of this article. It's simple, but efficient: two columns, no images, all CSS.

Figure 1. The two-column layout you created in the companion tutorial article

Let me also review briefly some tips about floating:

• A float must be given a width.
• A float must be given a directional value of left or right (there is no top or bottom).
• If you want a float to appear alongside another element, it must precede that element in the source order of the document.
• A float never covers text or inline images.
• Avoid using a width on a block element following a float; use a margin on the same side of the float instead.
• Since a float is taken "out of the flow" of the document, a float inside another container must be cleared in order for the parent container to enclose it properly.

Note: For more information, read John Gallant and Holly Bergevin's series of float articles at Community MX: Float: The Theory and Float: The Bugs – Part One (login required).

Page 2 of 9

Previous Page

Next Page