css layout with html5

index-finished.html and css/style-finished.css

We need a nice illustration or photo to doll up our text, with a caption. It would be nice if the text flowed around our captioned image neatly, with a bit of padding and a nice border. You already know how to float divs for page layout - here's how to do similar for images. For this example, you can either use img/wave.png from this tutorial or use your own image, then add this just below the article h1 in index.html:

We want the whole div - caption and all - to be floated left, so add this to your stylesheet:

Let's break that down. We use float:left to get the nearby text to wrap around it. We set width:200px so that both the image and the caption are contained in the same box - otherwise the caption text would jut way out to the right. We set margin-right to provide a gap between the edge of the box and the text, for breathing room (note we do NOT want that margin all the way around the image - just to the right, since it's floated left.) The 5px of padding provides a gap so that our border doesn't slam up against the side of the image. Finally, we apply some margin-top to match the top margin on paragraph text in our design - otherwise the top of the image would not align with the top of the nearby text. Here's what we've got so far:

The caption still has too much space above and below it. It would also be nice if it were smaller, and italicized. Easily accomplished with the following rule:

Here we're just erasing the default top and bottom margins that come with paragraphs, and tweaking the font's appearance. Much nicer!