Foundation HTML5 with CSS3

Putting it All Together

What’s more, this simple technique works for most other embedded media, not just images:

img,
video,
object,
embed {
max-width: 100%;
height: auto;
}

We’ll add this rule to the CSS reset at the top of our style sheet so most embedded images and videos will
fit their liquid containers automatically. The technique works well in current browsers but can prove
problematic in older browsers, especially on Windows (which doesn’t always resize images smoothly). You
can learn more about fluid images—including some workarounds for older, less capable browsers—in
Ethan Marcotte’s aptly titled article, “Fluid Images” (alistapart.com/articles/fluid-images/).

Now we can get back to our new item image. Remember that it’s positioned out of the ordinary flow of the
document, and is positioned on the left side of its container. To fit into the space created by the box’s
padding, this image actually needs to be less than the full width of the box, so we’ll adjust this image’s
maximum width accordingly. Instead of ensuring that it never exceeds 100% of its parent’s width, we’ll
make sure it never exceeds 42% of its parent’s width (42% because we still want to keep some space
around the image, so it should be a little less than half of the container).

Listing 10-22 shows our final styling for the new item box and product image, and you can see the end
result in Figure 10-16. The entire box will adjust to the width of the page because we’ve used percentage
units for widths and padding where necessary. We haven’t covered the styling for the title bar; you’ll get to
enjoy figuring that out on your own.

Listing 10-22. The complete style rules for the new item box on the Power Outfitters home page

.new-item .product {
position: relative;
padding: 25px 25px 10px 54%;
min-height: 225px;
border: 2px solid #00258e;
background: rgba(255,255,255,.5) url(../images/new-burst.png) 108% 116% no-repeat;
}

.new-item .product-img {
position: absolute;
left: 25px;
top: 25px;
max-width: 42%;
}