HTML and CSS Reference
In-Depth Information
chapter
eight
Creating a Multicolumn Layout
ONE OF THE
most common layouts in web design is a multicolumn layout. By giving a web page columns, you can
separate content into relevant sections, making better use of the space available.
Multicolumn layouts are most commonly achieved using the
float
property, which technically was never added to
the CSS specification for the purpose of creating robust, multicolumn layouts. Its true purpose is actually quite a
simple one: to allow one element to flow next to another. Creating multiple columns via the use of
float
,
clear
,
and other properties is really a “hack”—you're making use of something in the way it wasn't intended—but it's a hack
that is needed because CSS, as yet, offers very little in terms of enabling the creation of multicolumn layouts.
(
www.w3.org/TR/css3-regions
)
, modules that aim to improve how columns and content areas are created on
a web page. Unfortunately, both of these modules are in working draft and have little to no support in modern
browsers, so they can't be used on a working website.
Currently, each element on the Cool Shoes & Socks web page vertically follows the next. In this chapter, you learn the
basics of the
float
and
clear
properties and then combine these properties along with others to place elements
side by side to make better use of the horizontal space available.
Project files update (ch08-00): If you haven't followed the previous instructions and are comfortable working from
here onward or would like to reference the project files up to this point, you can download them from
float
Initial value:
none
| Inherited: No | Applies to: All unless
display
in
none
or
position
is
absolute
| CSS2.1
Browser Support: IE 4+, Firefox 1+, Chrome 1+, Opera 7+, Safari 1+
At present, the product image of those irresistible horse socks—positioned in the main content of the Cool Shoes &
Socks page—breaks the flow of text and takes up more space than necessary. By floating that image, you can make
the text flow alongside it:
1.
In styles.css, below the
#main
rule set, add a new rule set:
