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