HTML and CSS Reference
In-Depth Information
Designing with CSS often boils down to the artful application of overrides. You're providing your own style
rules to override the browser's defaults, and often overriding your own previously declared style rules with
more specific rules, or with equally specific rules and declarations further down in the cascade order.
Understanding inheritance, specificity, and the cascade will help you keep track of which values are
affecting a given element and which values are being overridden to arrive at the final presentation.
The New Item Box
The home page prominently showcases the latest addition to the Power Outfitters catalog of products. This
is a big promotion of a hot-ticket item so it should really stand out and demand attention (but not in an
obnoxious way). In the markup, this new item box is just another product box, though it has an extra
wrapper and another heading to introduce it. We can give this product box a different layout and some
extra decoration to make it look a little more special, but without changing the box's structure at all.
We want to place the product image on the left side of the box with the rest of the content on the right.
Simply floating the image to the left is a good start, but it's not quite good enough. As you can see in
Figure 10-13, the content would flow around the floated image, just as you'd expect. What we really want
to do is keep the product name, description, price, and cart button in a neat column on the right with the
image by itself in a column on the left. And we want to do this without changing the structural markup or
adding any extra elements.
Figure 10-13.
Floating an image works just as it should, but this isn't the layout we're after
The solution to this problem is a clever combination of padding and absolute positioning, just like we
demonstrated in Chapter 9. We'll add some generous padding to the left side of the box, pushing the text
to the right side to create the appearance of columns. Then we'll position the image into the padded space
we've reserved for it.
