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.
CSS Level 3 sees the introduction of flexbox ( ) and 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 .
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:
Search WWH ::

Custom Search