HTML and CSS Reference
In-Depth Information
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