Expandable CSS “Note” Box

Avatar of Chris Coyier
Chris Coyier on (Updated on )

📣 Freelancers, Developers, and Part-Time Agency Owners: Kickstart Your Own Digital Agency with UACADEMY Launch by UGURUS 📣

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.