Give Your Images Space and Captions For Better Layout

Avatar of Chris Coyier
Chris Coyier on (Updated on )

UGURUS offers elite coaching and mentorship for agency owners looking to grow. Start with the free Agency Accelerator today.

You can always float your images to one side or the other and give them a bit of a margin just by giving them a class like “floatright” and declaring that class as:

.floatright {
float: right;
margin: 5px;
}

That’s fine and dandy, but let’s switch things up a bit in order to give us more control as well as add captions to the images. This adds a nice touch to any web article and a more professional layout feel.

caption2.png

Instead of giving the image a class, put it inside of a div and give the div a class. Inside the div, include the image as well as the caption:

<div class="rightside_image">
  <img src="egg.jpg" alt="egg" />
  <p>Stop-motion image of an<br />egg getting sliced in half.</p>
</div>

Then declare that class in your CSS:

div.rightside_image {
float: right;
padding: 10px;
margin: 10px;
border: 2px solid #cccccc;
text-align: center;
font-size: 0.8em;
font-style: italic;
}

You could then copy and change this declaration to create different variations, such as a left floated image, centered images, different background colors, etc.

caption1.png

[LIVE EXAMPLE]

[DOWNLOAD EXAMPLE]