HTML and CSS Reference
In-Depth Information
Lesson 5.
Positioning Content
One of the best things about CSS is that it gives us the ability to position content and ele-
ments on a page in nearly any imaginable way, bringing structure to our designs and helping
make content more digestible.
There are a few different types of positioning within CSS, and each has its own application.
In this chapter we're going to take a look at a few different use cases—creating reusable lay-
outs and uniquely positioning one-off elements—and describe a few ways to go about each.
Positioning with Floats
One way to position elements on a page is with the
float
property. The
float
property
is pretty versatile and can be used in a number of different ways.
Essentially, the
float
property allows us to take an element, remove it from the normal
flow of a page, and position it to the left or right of its parent element. All other elements on
the page will then flow around the floated element. An
<img>
element floated to the side of
a few paragraphs of text, for example, will allow the paragraphs to wrap around the image
as necessary.
When the
float
property is used on multiple elements at the same time, it provides the
ability to create a layout by floating elements directly next to or opposite each other, as seen
in multiple-column layouts.
The
float
property accepts a few values; the two most popular values are
left
and
right
, which allow elements to be floated to the left or right of their parent element.
1.
img {
2.
float: left;
3.
}
Floats in Practice
Let's create a common page layout with a header at the top, two columns in the center, and
a footer at the bottom (see
Figure 5.1
). Ideally this page would be marked up using the
1.
<header>...</header>
2.
<section>...</section>
3.
<aside>...</aside>
4.
<footer>...</footer>
Search WWH ::
Custom Search