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.

June 14, 2004
Comments closed
Posted in CSS

Comments

1. June 15, 2004 by Kevin Francis

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. June 15, 2004 by Jadwigo

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

3. June 16, 2004 by DH

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

4. June 16, 2004 by Rick Blanton

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

5. June 16, 2004 by Jadwigo

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. June 17, 2004 by Heiser Erwin

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. June 17, 2004 by dusoft

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

8. July 21, 2004 by Ben

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. July 21, 2004 by Ben

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. December 29, 2004 by Bill

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.

Sorry, comments are closed for this post.

Information, sponsorship, and externals

About the author

Roger Johansson is a Swedish web professional specialising in web standards, accessibility, and usability. More about me and this site.

Looking for web hosting?

Use the promo code 456BEREASTREET3 to save USD 20 when you sign up!

Recommended books

456 Berea Street Bookstore

Recommended music

456 Berea Street Music Store

Latest articles

Validation statistics from Nikita the Spider Comments off: An analysis of the sites crawled by the bulk validation tool Nikita the Spider during March 2008.
Authentic Jobs API and Affiliates program Comments off: The Authentic Jobs job listing service now has a public API and an affiliate program.
What does Acid3 mean to you and me? Comments off: Opera and Apple have announced that their web browsers pass the Acid3 Browser Test, but how will that help web designers and developers?
Designing Web Navigation (Book review) Comments off: Learn the fundamentals of navigation design and design better navigation systems for large and small sites as well as for web based applications.
DOMAssistant bundle for TextMate Comments off: To save keystrokes and speed up development I have created a DOMAssistant bundle for TextMate.
First impressions of Internet Explorer 8 Beta 1 Comments off: My impressions after trying out Internet Explorer 8 Beta 1 for a couple of days.

CSS teaser box revisited

Comments