Image captions

Preview: what the working site looks like.

My 2010 Dodge Ram

Fishing Boat

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

The markup

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
</head>
<body>      
    <div id="container"> 
<!--wide box for captions alongside image-->
	<div class="wide_wrapper">
        <img src="w9c76982010ram.jpg" width="200" height="136" alt="2010 Ram" class="thumbone" /> 
            <h3>My 2010 Dodge Ram</h3>
                <p>
                    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna 
                    aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no 
                    sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr.
                </p>
	<!--end wide_wrapper--></div>
<!--tall box for captions under image-->
	<div class="tall_wrapper">
        <img src="w9c76982010ram.jpg" width="200" height="136" alt="2010 Ram" class="thumbtwo" /> 
            <h3>My 2010 Dodge Ram</h3>
                <p>
                    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna 
                    aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no 
                    sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr.
                </p>
	<!--end wide_wrapper--></div>
	<div class="wider_wrapper">
        <img src="boat.jpg" width="195" height="175" alt="boat" class="thumbthree" /> 
            <div class="caption">
                <h3>Fishing Boat</h3>
                    <p>
                        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna 
                        aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no 
                        sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam 
                        nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo 
                        duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
                    </p>
            <!--end span caption--></div>
	<!--end wide_wrapper--></div>
    <!--container--></div>  
</body>
</html>

The CSS

html, body {
	margin: 0;
	font: 100% "Trebuchet MS", Arial, Helvetica, sans-serif;
	color: #000;
	background: #fc6;
}
		/* HTML5 tags */
		header, section, footer,
		aside, nav, article, figure {display: block;}
#container {
	width: 1000px;
	margin: 0 auto 900px auto;
	overflow: auto;
	background: #ccc;
}
/*******this is for the first box**********/
.wide_wrapper {
	width: 500px;
	margin: 50px 0 0 150px;
	overflow: auto;
	text-align: left;
	border: 1px solid #F00;
	font-size: 0.7em;
}
.thumbone { 
	float: left; 
	margin: 5px; 
	background: #eee; 
	padding: 10px; 
}
	/**************this is for the second box****************/
	.tall_wrapper {
		width: 220px;
		float: left;
		margin: 50px 2px 50px 10px;
		padding: 5px;
		text-align: left;
		border: 1px solid #F00;
		font-size: 0.7em;
	}
	.thumbtwo {
		background: #eee; 
		padding: 10px; 
	}
		/**************this is for the third box****************/
		.wider_wrapper {
			height: 256px;
			margin: 50px 3px 10px 235px;
			overflow: auto;
			text-align: left;
			background: url(Screenshot2.JPG);
			font-size: 0.7em;
		}
		.thumbthree { 
			float: left; 
			margin: 27px 0 0 15px; 
		}
		.caption {
			width: 500px;
			margin: 30px 0 0 230px;
		}