HTML and CSS Reference
In-Depth Information
Tip: CSS Units
You'll notice that throughout the examples, numerical values are appended
with "px.” This refers to pixels and is just one kind of CSS unit. Other com-
monly used units include percentages (%), ems, and rems. We'll discuss more
CSS units in the next chapter.
Next in our CSS, we have the two elements inside the
.main
element. The first is the left
column, which has a class of
.latest
(referring to the “latest recipes”). The other column
is an
<aside>
element to which we've applied a class of
.sidebar
.
As discussed earlier in the section covering block and inline elements, since both of these
elements are block-level, they will, by default, appear one after the other, stacked vertically,
rather than side-by-side filling the available horizontal space of their parent element—which,
in this case is the
.main
element.
To have them appear side by side in a two-column format, we use the float property, which
tells the browser to push the element towards a specified side of the page, as far as it can go.
The float property can accept one of three values:
none
,
left
, or
right
.
To achieve the effect we want, we apply
float: left
to the left column, and
float:
right
to the right column. In addition, the specified widths help balance the columns so
they match how they look in the Photoshop mock-up.
At this stage, with all our content in place, the content inside the .main element should look
like
Figure 2.4
.
