Creating a simple three-column design with CSS and Dreamweaver 8

Starting at the end

Since I'm beginning where I last ended in my previous article, let's have a look at that layout. Figure 1 shows the index.htm 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 previous article

(+) View larger

Let me also briefly review 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 7

Previous Page

Next Page