Give Your Images Space and Captions For Better Layout

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.

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.

[LIVE EXAMPLE]

[DOWNLOAD EXAMPLE]