HTML and CSS Reference
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:
<img src=” “ alt=” “>
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.
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 :
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.