How to Create an Image Gallery with a Horizontal Scroll Bar using CSS Only

Image Gallery How To, for Front End and Web Applications 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: Horizontal Scrollable Image Gallery 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: Image Gallery With Horizontal Scroll Use the horizontal scrollbar to see the other images. 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: Horizontal Scrollable Image Gallery div.scroll-container { white-space: nowrap; overflow: auto; background-color: #333; padding: 10px; } div.scroll-container img { padding: 10px; } Image Gallery With Horizontal Scrolling Use the horizontal scrollbar to see the other images. 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. To read next (click): How to Create Thumbnail Click Image Slideshow Gallery using CSS and JavaScript Chrys

May 11, 2025 - 06:07

Image Gallery

How To, for Front End and Web Applications

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:

    
    
    
        Horizontal Scrollable Image Gallery

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:

        Image Gallery With Horizontal Scroll
        Use the horizontal scrollbar to see the other images.

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:

    
    
    
        Horizontal Scrollable Image Gallery
        
        
        

        

        
    
      
        Image Gallery With Horizontal Scrolling
        Use the horizontal scrollbar to see the other images.

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