Give Your Images Space and Captions For Better Layout
Published by Chris Coyier
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:
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:
border: 2px solid #cccccc;
You could then copy and change this declaration to create different variations, such as a left floated image, centered images, different background colors, etc.