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.

Posted on June 14, 2004 in CSS

Comments

  1. Very nice. I have a friend going stark raving mad about this. He really likes it, and is likely to force me to teach him CSS now. Sigh.

  2. I tried something like that too, but your’s is a lot cleaner .. now I’ll have to update mine :)

  3. Lovely, really very nice … I can feel a little redesigning coming on …

  4. Something along the same line, fluid, looks great. www.horsetown.org

  5. horsetown in #4 has a similar visual effect, but gets there by using tables and images in the html source…

    the box on this site uses very clean and lean code with css styles for the background images

    technically the horsetown solution adds a lot more overhead and is not considered “elegant” in standards-based-layout-country.. it still looks nice and works anyway :)

  6. Nice one, cheers!! I’m redoing the site soon in CSS and something like this would be nice for the news page. Thanks for sharing your ideas!

  7. See also my: Box with rounded corners in XHTML and CSS

  8. Seem to have found a bug: in Firefox if I make a few boxes one under the other (just copying the markup for the one you have) then I get a one-pixel gap between the <a> at the bottom of the box and the <p> element. This only happens in subsequent boxes and not consistently. It doesn’t happen in IE. The gap is almost unnoticeable with the box you have, but if you change the background colour of the <body> element you will see a 1px line.

  9. If my comment above seems a bit hard to read it’s because I put html elements in the text which got rendered instead of showing! Damn. I meant to say the gap is between the bottom anchor element and the last paragraph element. The last sentence refers to changing the background colour of the body element.

  10. July 25, 2004 by albion7

    Nice work. I’ve been using a similar technique to expand images. I’m surprised you haven’t more feedback. See you at css-d!

  11. Very nice work. I love to see CSS being used in more inventive ways. Thanks for the shared example. Doing so helps others learn from your explorations.

    In response to post #8 and #9, I believe that you can remedy this by giving all of the elements in the flow a border, even if it is non-existent. For example:

    #someDiv{ border: none;}
    /* or my pref */
    #someDiv{ border: 0;}
    

    I have not tested this, but I will and post back here as soon as I find out something. I will also try to post the link to the article that addresses the Moz/FF “pixel shift bug,” as it has been called.

Comments are disabled for this post (read why), but if you have spotted an error or have additional info that you think should be in this post, feel free to contact me.