Back to CSS Tips
Preview: what the working site looks like.
image image image image image image image image
image image image image image image image image image image image image image image image image
The markup
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>    
    <div id="container">
    	<div id="vert_scroll">
            <img src="03Lily%20new_jpg.jpg" width="150" height="122" alt="image" />
            <img src="020403_sunset_jpg.jpg" width="150" height="121" alt="image" />
            <img src="IMG_1536_JPG.jpg" width="150" height="122" alt="image" />
            <img src="IMG_6222%20Cape%20Elrington_jpg.jpg" width="150" height="122" alt="image" />
            <img src="03Lily%20new_jpg.jpg" width="150" height="122" alt="image" />
            <img src="020403_sunset_jpg.jpg" width="150" height="121" alt="image" />
            <img src="IMG_1536_JPG.jpg" width="150" height="122" alt="image" />
            <img src="IMG_6222%20Cape%20Elrington_jpg.jpg" width="150" height="122" alt="image" />
		<!--end vert_scroll--></div>
                    <div id="hor_scroll">
                        <div id="image_box">
                            <img src="03Lily%20new_jpg.jpg" width="150" height="122" alt="image" />
                            <img src="020403_sunset_jpg.jpg" width="150" height="121" alt="image" />
                            <img src="IMG_1536_JPG.jpg" width="150" height="122" alt="image" />
                            <img src="IMG_6222%20Cape%20Elrington_jpg.jpg" width="150" height="122" alt="image" />
                            <img src="03Lily%20new_jpg.jpg" width="150" height="122" alt="image" />
                            <img src="020403_sunset_jpg.jpg" width="150" height="121" alt="image" />
                            <img src="IMG_1536_JPG.jpg" width="150" height="122" alt="image" />
                            <img src="IMG_6222%20Cape%20Elrington_jpg.jpg" width="150" height="122" alt="image" />
                            <img src="03Lily%20new_jpg.jpg" width="150" height="122" alt="image" />
                            <img src="020403_sunset_jpg.jpg" width="150" height="121" alt="image" />
                            <img src="IMG_1536_JPG.jpg" width="150" height="122" alt="image" />
                            <img src="IMG_6222%20Cape%20Elrington_jpg.jpg" width="150" height="122" alt="image" />
                            <img src="03Lily%20new_jpg.jpg" width="150" height="122" alt="image" />
                            <img src="020403_sunset_jpg.jpg" width="150" height="121" alt="image" />
                            <img src="IMG_1536_JPG.jpg" width="150" height="122" alt="image" />
                            <img src="IMG_6222%20Cape%20Elrington_jpg.jpg" width="150" height="122" alt="image" />
                        <!--end image_box--></div>
                    <!--end hor_scroll--></div>    
    <!--container--></div>  
</body>
</html>
        
The CSS
html, body {
	margin: 0;
	font: 100% "Trebuchet MS", Arial, Helvetica, sans-serif;
	color: #000;
	background: #fc6;
}
#container {
	width: 700px;
	margin: 30px auto 900px;
	padding: 100px 50px;
	background: #999;
	overflow: auto;
}
	#vert_scroll {
		height: 300px;
		width: 167px;
		margin: 50px 20px 0 0;
		float: left;
		overflow: auto;
	}
	#hor_scroll {
		height: 139px;
		width: 500px;
		margin: 100px 0 0 0;
		overflow: auto;
	}
		#image_box {
			height: 122px;
			width: 2400px;
		}
			#image_box img {float: left;}