HTML and CSS Reference
In-Depth Information
Figure 5.1
A common page layout without any floats
Here the
<section>
and
<aside>
elements, as block-level elements, will be stacked
on top of one another by default. However, we want these elements to sit side by side. By
floating the
<section>
to the
left
and the
<aside>
to the
right
, we can position
them as two columns sitting opposite one another. Our CSS should look like this:
1.
section {
2.
float: left;
3.
}
4.
5.
aside {
6.
float: right;
7.
}
For reference, when an element is floated, it will float all the way to the edge of its parent
element. If there isn't a parent element, the floated element will then float all the way to the
edge of the page.
When we float an element, we take it out of the normal flow of the HTML document. This
causes the width of that element to default to the width of the content within it. Sometimes,
such as when we're creating columns for a reusable layout, this behavior is not desired. It
can be corrected by adding a fixed
width
property value to each column. Additionally,
to prevent floated elements from touching one another, causing the content of one to sit
directly next to the content of the other, we can use the
margin
property to create space
between elements.
Here, we are extending the previous code block, adding a
margin
and
width
to each
column to better shape our desired outcome (
Figure 5.2
)
.
Search WWH ::
Custom Search