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).