WEB STANDARDS CREATIVITY

70
There are a few items to note here:
The block value for the module’s class attribute is a reusable piece of markup I’ve placed throughout the New York
Magazine templates. It’s simply a hook for the Easy Clearing Method, and it’s added to those rules (.block:after,
etc.) so that it contains any floats inside it.
The row class inside the content area serves a similar function: if any of its child “column” divs are floated, they won’t
escape their parent “row” div.
The other value in the module’s class (module-in-section) acts as a kind of unique identifier for this type of module.
I couldn’t use an actual id attribute here, as more than one of these types of modules might appear on a page—
and per the HTML specification, an id must be unique within the page.
With our markup in place, we can move on to styling it. Given that the wide and narrow versions of the module share the
same aesthetic qualities (such as typography, color, and background images), I won’t discuss them here; rather, let’s focus on
building out our two content columns.
In the single-column mode, we can let the markup’s source order do the work for us. The first column will simply stack on
top of the second, as shown in Figure 3-17. We can, however, apply a little CSS to clean things up a bit:
.module-in-section .content {
padding: 0 14px 13px;
}
body.ad-column-180 .module-in-section .col-1 {
text-align: center;
margin: 7px 0 10px;
}
The first rule simply applies some padding to our content div,
giving our columns some breathing room. The second rule centers
the column’s content (namely, the img) and adds some top
and bottom margins. But as you might have noticed, we preface
that second rule with the same body.ad-column-180 rule we
used to create our narrow sidebar (in the “My class-fu is unstoppable”
section). One class, two separate effects. Lightweight
code is a beautiful thing, isn’t it?
From this logic, we can apply the ad-column-300 class to the
body element to create our two-column effect. We’ll need to
float each column div—the first column floated to the right,
and the second column to the left, as shown in Figure 3-19.
body.ad-column-300 .module-in-section .column {
width: 157px;
}
body.ad-column-300 .module-in-section .col-1 {
float: right;
}
body.ad-column-300 .module-in-section .col-2 {
float: left;
}
Figure 3-19. The code to get our two-column layout in place