This provides a CSS template for layout out photos on a page and using for a print photo book.

CSS Polaroid Photo Layout

<style type="text/css"> 
	body{
		background-color: #000;
	}
	 
	#container{
		width: 600px; margin: 40px auto;
		}
	 
	ul.gallery { 
		list-style: none;
	}

	ul.gallery li a {
		position: relative;
		float: left;
		padding: 10px 10px 25px 10px;
		background: #FFF;
		border: 1px solid #fff;
		-moz-box-shadow: 0px 2px 15px #333;
	}
	
	ul.gallery li a.pic-1 {
		z-index: 1;
		-webkit-transform: rotate(-10deg);
 		-moz-transform: rotate(-10deg);
	}
	ul.gallery li a.pic-2 {
		z-index: 5;
		-webkit-transform: rotate(-3deg);
 		-moz-transform: rotate(-3deg);
	}
	ul.gallery li a.pic-3 {
		z-index: 3;
		-webkit-transform: rotate(4deg);
 		-moz-transform: rotate(4deg);
	}
	ul.gallery li a.pic-4 {
		z-index: 4;
		-webkit-transform: rotate(14deg);
 		-moz-transform: rotate(14deg);
	}
	
	ul.gallery li a:hover {
		z-index: 10;
		-moz-box-shadow: 3px 5px 15px #333;
	}
</style> 
 
<div id="container"> 

	<ul class="gallery"> 
		<li><a href="http://www.flickr.com/photos/kinlane/5429286065/" class="pic-1"><img src="http://farm6.static.flickr.com/5140/5428853547_daa0937b1e_m.jpg" alt="Photograph of a waterfall" /></a></li> 
		<li><a href="http://www.flickr.com/photos/galego/3131005845/" class="pic-2"><img src="http://farm6.static.flickr.com/5297/5429381698_31a628a702_m.jpg" alt="Photograph of clouds and sunlight" /></a></li> 
		<li><a href="http://www.flickr.com/photos/claudio_ar/1810490865/" class="pic-3"><img src="http://farm6.static.flickr.com/5137/5426148871_27bbb9382e_m.jpg" alt="Photograph of a lake scene at dusk" /></a></li> 
		<li><a href="http://www.flickr.com/photos/claudio_ar/2952099761/" class="pic-4"><img src="http://farm6.static.flickr.com/5011/5402622906_b3ef457da0_m.jpg" alt="Photograph of a tree and green grass" /></a></li> 
	</ul> 
 
</div>