Foundation HTML5 with CSS3

Putting it All Together

Listing 10-21 shows the beginnings of our CSS. Declaring position:relative for the containing element
establishes the positioning context for the product image and the min-height property ensures the box
will be at least as tall as the image. The image is positioned out of the normal flow so without this min-
height declaration the box would collapse to the height of the text, which might not always be as tall as
the image.

Listing 10-21. Laying out the new item box

.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;
}

We’ve padded the left half of the product box (slightly more than half, actually) with a percentage value,
allowing the padding to adjust to the fluid width of the page as the box itself adjusts. However, bitmap
images by their very nature are not fluid, so there’s a chance this image will overlap the text if the padded
space becomes too small for it, like you see in Figure 10-14.

Figure 10-14. Images with a fixed width in a liquid layout can overflow their containers or overlap other content