Grow your CSS skills. Land your dream job.

Expandable CSS “Note” Box

Published by Chris Coyier

Creating vertically-expanding boxes is easy, just declare a width in your div CSS but no height. The div will expand to as large as it needs to be for the content inside. It gets a little more complicated if you want to apply styling to those boxes with images. If you want to use an image just on the top of the box, you can apply a background-image to the div and set it's position to be top left, top right, or top center like so:

.expandable_box {
width: 210px;
background-image ("IMAGE_URL");
background-position: top center;
background-repeat: no-repeat;
}

That works great, but what if you want to have an image on the bottom as well? If you don't need the box to be expandable you can just use one big image for the background in the exact size you need. If you do need it to be exandable, that becomes a bit more complicated. Here is a solution.

expandable box

[LIVE EXAMPLE]

[DOWNLOAD EXAMPLE]
Photoshop file included.

Comments

  1. Nate

    IE7 displays extra background at the bottom

  2. Hey whats going on. I’m wondering if this can be used with content other than text on the inside of the picture? I plan on using something like this for a content box in my sidebars. If not, how can this be accomplished. Also, is it possible to get other elements below this kind of content box to move farther down if this expands closer to other elements below it?

    Thanks

  3. Luis
    Permalink to comment#

    Hey does this work against multiple browsers?

  4. cooper
    Permalink to comment#

    Hi just tested this in IE6, IE 7, firefox and Safari.

    Only breaks in IE6, IE7 repeats the bottom image for some reason.

    nice and simple idea, so if anyone can fix the IE6 problem that would be good!

  5. Lisa
    Permalink to comment#

    Is there any way to do this so that it has a transparent background around the box?

    I tried and failed with a box with rounded corners, using transparent png's. Actually, from the way it looks on my screen, I'm so close, I can taste it. Everything's in the right spot, but there's a 10px gap between the middle and the bottom image. Arg. It's just that you can see the corners of the background from behind the corners of the bottom image, and that kinda sucks.

  6. Iban
    Permalink to comment#

    Hey, how was the navigation made for this website (up the top) right of the header, without flash? Its awesome, and the at the bottom too.

Leave a Comment

Current day month ye@r *

*May or may not contain any actual "CSS" or "Tricks".