Expandable CSS “Note” Box

Avatar of Chris Coyier
Chris Coyier on (Updated on )

DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit!

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


Photoshop file included.