| home / authoring / style / sheets / css_mastery |
|
|
|
The HTML needed to create a three-column layout is very similar to that used by the two-column layout, the only difference being the addition of two new divs inside the content div: one for the main content and one for the secondary content.
Using the same CSS as the two-column technique, you can float the main content left and the secondary content right, inside the already floated content div (see Figure 7-4). This essentially divides the second content column in two, creating your three-column effect.
Figure 7-4. Creating a three-column layout by dividing the content column into two columns
As before, the CSS for this is very simple. You just set your desired widths and then float the main content left and the secondary content right:
You can tidy up the layout slightly by removing the padding from the content element and applying it to the content of the secondary content instead:
This leaves you with a nice and solid three-column layout (see Figure 7-5).
Figure 7-5. Three-column layout using floats
| home / authoring / style / sheets / css_mastery |
URL:
