CSS teaser box revisited
In case you had a look at my CSS teaser box demo from last week, you’ll know that it has one flaw: its width is fixed. I wanted to find a workaround for that, if possible without adding any extra markup.
I almost got there. The only markup I had to add was a div around the link at the bottom of the box. I also ended up using two images instead of one, but doing so let me come up with a rounded corner box that is flexible both horizontally and vertically. Try it out for yourself.
It works pretty much like Doug Bowman’s Sliding Doors technique, using one narrow and one wide image. This particular demo will break when the box is wider than 1600 pixels, which should be more than enough for just about any layout. In most cases you could trim the wider image a bit to save a few hundred bytes.
Since the width of this site is (currently) fixed, there isn’t much point inserting a demo box in this entry. To see an example, visit the stand-alone demo page instead.
- Previous post: Ampersands and validation
- Next post: Flexible news list