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

Title

Other text here

sunset

Title

Other text here

beach

Title

Other text here

boat

Title

Other text here

The markup
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>     
    <div id="container">  
		<dl>
			<dt><img src="03Lily%20new_jpg.jpg" width="150" height="122" alt="lillies" /></dt>
				<dd>
					<h2>Title</h2>
					<p>Other text here</p>
				</dd>
			<dt><img src="020403_sunset_jpg.jpg" width="150" height="121" alt="sunset" /></dt>
				<dd>
					<h2>Title</h2>
					<p>Other text here</p>
				</dd>
			<dt><img src="IMG_1536_JPG.jpg" width="150" height="122" alt="beach" /></dt>
				<dd>
					<h2>Title</h2>
					<p>Other text here</p>
				</dd>
			<dt class="last"><img src="IMG_6222%20Cape%20Elrington_jpg.jpg" width="150" height="122" alt="boat"></dt>
				<dd class="last">
					<h2>Title</h2>
					<p>Other text here</p>
				</dd>
		</dl>      
    <!--container--></div>  
</body>
</html>
        
The CSS
html, body {
	margin: 0;
	font: 100% "Trebuchet MS", Arial, Helvetica, sans-serif;
	color: #000;
	background: #fc6;
}
#container {
	width: 800px;
	margin: 30px auto 900px;
	background: #999;
	overflow: auto;
}
dl {
	width: 300px;
	margin: 10px;
	padding: 5px;
	overflow: auto;
	border: 1px solid #fc6;
}
dt {
	float: left;
	margin: 0 0 10px 0;			
}
	dt img {display: block;}
dd {			
	height: 122px;	
	margin: 0 10px 10px 160px;								
}
	.last {margin-bottom: 0;}
h2, p {margin: 0}