How to Create an Image Gallery with a Horizontal Scroll Bar using CSS Only
Image Gallery
How To, for Front End and Web Applications
By: Chrysanthus Date Published: 23 Apr 2025
An image gallery for a webpage is a set of pictures. This tutorial explains How to Create an Image Gallery with a Horizontal Scroll Bar using CSS Only. The images are in a row. There is a horizontal scroll-bar at the bottom of the row, to access images that are not currently visible.
The complete webpage code is at the end of this tutorial. The reader should copy the complete code into a text editor. Save the file with any name, but with the extension, .html . Open the file in the browser. Locate the horizontal scroll bar at the bottom of the row of images. Scroll left and right to see the rest of the pictures. The images are in the website, broad-network.com . So the reader must be hooked up to the Internet before doing this. The reader is advised to do this before carrying on to read the rest of this tutorial.
The Webpage Skeleton Code
The skeleton code for the webpage to which more useful code will be added is:
<!DOCTYPE html>
<html>
<head>
<title>Horizontal Scrollable Image Gallery</title>
<link rel='icon' href='https://www.examplee.com/images/logo.jpg' type='image/x-icon'>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Description of the Web Page.">
<style>
</style>
<script type="text/javascript">
</script>
</head>
<body>
</body>
</html>
Any modern professional webpage should have at least the first four tags in the HTML head element above. The HTML style element will have just two CSS rules. The JavaScript will be left empty. The HTML body element will have the HTML div for the images.
Content of the HTML body Element
The content of the HTML body element is:
<h2>Image Gallery With Horizontal Scroll</h2>
<p>Use the horizontal scrollbar to see the other images.</p>
<div class="scroll-container">
<img src="https://www.broad-network.com/Internet/articles/_general/dir0/images/img_5terre.jpg" alt="Cinque Terre" width="600" height="400">
<img src="https://www.broad-network.com/Internet/articles/_general/dir0/images/img_forest.jpg" alt="Forest" width="600" height="400">
<img src="https://www.broad-network.com/Internet/articles/_general/dir0/images/img_lights.jpg" alt="Northern Lights" width="600" height="400">
<img src="https://www.broad-network.com/Internet/articles/_general/dir0/images/img_mountains.jpg" alt="Mountains" width="600" height="400">
</div>
There are four images. They are all in the div with the class-name, "scroll-container".
Content for the HTML Style Element
There are only two CSS rules. They are all within the start and end tags of the HTML style element, in the HTML head element.
Styling the Container div
The CSS rule for the container div is:
div.scroll-container {
white-space: nowrap;
overflow: auto;
background-color: #333;
padding: 10px;
}
The white-space property with value, nowrap, means that if the total width of the images is longer then the width of its container, all the images should be in one row. The property, overflow, with value, auto, means that the browser should decide whether to provide a horizontal scroll bar or not. As soon as the total width of the images is more than the width of the container, the browser will provide a horizontal scroll bar. The background color for the container is #333 (dark gray). The padding for all the sides of the row container div, is 10px.
Styling the Images
Each image is within a rectangle. The gap between the actual image and the border, is called the padding. The CSS rule for each image is:
div.scroll-container img {
padding: 10px;
}
The padding for all the four sides is 10px.
The Complete Webpage Code
And there you have it: the complete webpage code is:
<!DOCTYPE html>
<html>
<head>
<title>Horizontal Scrollable Image Gallery</title>
<link rel='icon' href='https://www.examplee.com/images/logo.jpg' type='image/x-icon'>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Description of the Web Page.">
<style>
div.scroll-container {
white-space: nowrap;
overflow: auto;
background-color: #333;
padding: 10px;
}
div.scroll-container img {
padding: 10px;
}
</style>
<script type="text/javascript">
</script>
</head>
<body>
<h2>Image Gallery With Horizontal Scrolling</h2>
<p>Use the horizontal scrollbar to see the other images.</p>
<div class="scroll-container">
<img src="https://www.broad-network.com/Internet/articles/_general/dir0/images/img_5terre.jpg" alt="Cinque Terre" width="600" height="400">
<img src="https://www.broad-network.com/Internet/articles/_general/dir0/images/img_forest.jpg" alt="Forest" width="600" height="400">
<img src="https://www.broad-network.com/Internet/articles/_general/dir0/images/img_lights.jpg" alt="Northern Lights" width="600" height="400">
<img src="https://www.broad-network.com/Internet/articles/_general/dir0/images/img_mountains.jpg" alt="Mountains" width="600" height="400">
</div>
</body>
</html>
The reader should copy the complete code into a text editor. Save the file with any name, but with the extension, .html . Open the file in the browser. Locate the horizontal scroll bar at the bottom of the row of images. Scroll left and right to see the rest of the pictures. The images are in the website, broad-network.com . So the reader must be hooked up to the Internet before doing this.
Chrys