Back to CSS Tips
Preview: what the working site looks like.

Lilies a picture of lillies

sunset an Alaskan sunset

beach a deserted beach in Costa Rica

fishing boat a fishing boat in Cordova, Alaska

Valid HTML 5 Valid CSS!

The markup
<meta charset=utf-8>
<title>Untitled Document</title>
    <div class="wrapper">
        <p><span><a href=""><img src="03Lily%20new_jpg.jpg"   alt="Lilies" width="150" height="122" /> a picture of lillies</a></span></p>
        <p><span><a href=""><img src="020403_sunset_jpg.jpg"   alt="sunset" width="150" height="121" /> an Alaskan sunset</a></span></p>
        <p><span><a href=""><img src="IMG_1536_JPG.jpg"   alt="beach" width="150" height="122" /> a deserted beach in Costa Rica</a></span></p>
        <p><span><a href=""><img src="IMG_6222%20Cape%20Elrington_jpg.jpg"   alt="fishing boat" width="150" height="122" /> a fishing boat in Cordova, Alaska</a></span></p>
    <!--closes wrapper --></div>
html, body {
	margin: 0;
	font: 100% "Trebuchet MS", Arial, Helvetica, sans-serif;
	color: #000;
	background: #ccc;
.wrapper {
	width: 80%;
    min-width: 250px;
	margin: 100px auto;
	overflow: auto;
	text-align: center;
	background: #999;
.wrapper p {
	display: inline;
.wrapper span {
	width: 150px;
	margin: 5px 10px;
	vertical-align: top;
	display: inline-block;
.wrapper p img {margin: 5px 0;}	
.wrapper a {text-decoration: none;}
.wrapper ul {text-align: left;}
	p span a {
	p span a:hover {	
		-moz-opacity: 1;
		opacity: 1;