HTML and CSS Reference
In-Depth Information
.latest {
width: 640px;
float: left;
}
.sidebar {
width: 360px;
float: right;
}
You'll recognize these selectors from Chapter 1, where we introduced the bare CSS. The
HTML that this applies to includes the
.main
element, which wraps both columns. You'll
notice we've applied a margin declaration to
.main
.
As discussed earlier, this margin declaration is shorthand and would be equivalent to the fol-
lowing:
.main {
margin: 0 auto 0 auto;
}
But we've omitted the final two values for brevity, as they're inherited from the existing
values. While the zero values are probably easy to figure out (they declare that no margins
should exist on the top and bottom of the
.main
element), the
auto
values will be new to
you.
A value of
auto
set on the left and right margins of an element that has an explicitly defined
width, will automatically center that element horizontally inside its parent. It won't center the
contents of the element; only the element itself. In the case of the
.main
element, its parent
is the
<body>
element, which has no set width. So whatever the horizontal size (or width,)
of the browser, the
.main
element will center itself horizontally on the page as a result of
this margin declaration.
That's a CSS technique that you'll want to tattoo on the back of your hand—you'll use it
often. But it only works with horizontal centering. Vertical centering
is a trickier thing to ac-
