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-
.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
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-
complish in CSS.
Search WWH ::

Custom Search