HTML and CSS Reference
In-Depth Information
1.
section {
2.
float: left;
3.
margin: 0 1.5%;
4.
width: 63%;
5.
}
6.
aside {
7.
float: right;
8.
margin: 0 1.5%;
9.
width: 30%;
10.
}
Figure 5.2
A two-column page layout using floats
Floats May Change an Element's Display Value
When floating an element, it is also important to recognize that an element is re-
moved from the normal flow of a page, and that may change an element's default
display
value. The
float
property relies on an element having a
display
value of
block
, and may alter an element's default
display
value if it is not
already displayed as a block-level element.
For example, an element with a
display
value of
inline
, such as the
<span>
inline-level element, ignores any
height
or
width
property values.
However, should that inline-level element be floated, its
display
value will be
changed to
block
, and it may then accept
height
or
width
property values.
As we float elements we must keep an eye on how their
display
property val-
ues are affected.
With two columns we can float one column to the left and another to the right, but with
more columns we must change our approach. Say, for example, we'd like to have a row
Search WWH ::
Custom Search