CSS Teaser Box, flexible width and height

Flexible CSS Teaser Box

This is a box with flexible height and width. It uses two background images (tsr-l.gif and tsr-r.gif) to create the rounded corners and the top and bottom borders. CSS is used for the left and right borders. This box will expand vertically to contain any amount of text, of almost any size. How far it will be able to expand horizontally before it breaks depends on the size of the background images used. This example will break at a width of 1600 pixels. In most cases, that will be overkill, and one of the background images can be narrowed a bit to save a few hundred bytes.

View source to see the XHTML and CSS. You may also want to read the related blog posts for further notes and discussion: CSS Teaser Box and CSS teaser box revisited.

Also see the fixed width version

Lab Index | 456 Berea Street Home | Copyright © Roger Johansson