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.
Subscribe / follow
- Junior Graphic Designer at XO Group Inc. (New York City, New York, Ne, US)
- HL7 Experienced Developer at Entermotion
- Talented Web Designers & PHP Developers - Let's Talk! at Advant Interactive (Venice, CA, Ca, US)
- Front-end Developer at charity: water (New York, NY, Ne, US)
DreamHost web hosting
Use the promo code 456BEREASTREET3 to save USD 20 when you sign up for DreamHost