Creating vertically-expanding boxes is easy, just declare a width in your div CSS but no height. The div will expand to as large as it needs to be for the content inside. It gets a little more complicated if you want to apply styling to those boxes with images. If you want to use an image just on the top of the box, you can apply a background-image to the div and set it’s position to be top left, top right, or top center like so:

.expandable_box {
width: 210px;
background-image ("IMAGE_URL");
background-position: top center;
background-repeat: no-repeat;
}

That works great, but what if you want to have an image on the bottom as well? If you don’t need the box to be expandable you can just use one big image for the background in the exact size you need. If you do need it to be exandable, that becomes a bit more complicated. Here is a solution.

[LIVE EXAMPLE]

[DOWNLOAD EXAMPLE]
Photoshop file included.

Theoretically Related Articles:

• How To Make Walking Links
• CSS3 Multiple Backgrounds Obsoletes Sliding Doors
• Multiple Backgrounds: Left Half and Right Half
• Make a “Secret Message” with CSS Positioning and Transparency
• How To: Resizeable Background Image