HTML and CSS Reference
In-Depth Information
A REAL MULTI-COLUMN LAYOUT
Let's finish off this section with a slightly more complicated example—a more
traditional multi-col layout with different elements in each column rather than just
a single body of text split into columns. Check out the file our-friends-multi-col.
html, the first version of my parody Disney movie. It contains more complicated
content: six character bios. Each bio consists of a heading, image, and paragraph:
<article>
>
<img src=” “ alt=” “>
>
</article>
The only multi-col property this uses is
column-width
, which allows the number
of columns to change at different widths without modifying the content.
section {
.
: ;
}
To g e t t h e co l u m n s t To s i t well, l l , I s e t a fi xe d h e i g h t To n t h e a r t i c l e s :
article {
.
: ;
.
}
Yo u a r e in of w i in p of s s e s s i of in of f a u s e f u l l i t t l e r e s p of in s i v e m u l t i - c of l u m in l a y of u t
(
Figure 7.6
). This layout is actually very quick to implement and is flexible, com-
pared to using floats.
