How to create horizontal scrollable sections using CSS ?

Last Updated : 13 Apr, 2021

In this article, we will see how we can create a horizontal scrollable section using CSS. HTML code is used to create the basic structure of the sections and CSS code is used to set the style,

HTML Code: In this section, we will create a structure of our sections.

Steps:

Create a div element with class content.
Inside our content div create another four div with class section.
Give four different ids to each div.
In each div include a heading tag with the appropriate heading.

HTML

<!DOCTYPE html>
<html lang="en">
  
<body>
  
    <!-- Main container with class content -->
    <div class="content">
  
        <!-- Four sections for our code -->
        <div class="section" id="one">
  
            <!-- Heading tag -->
            <h1>Welcome To</h1>
        </div>
        <div class="section" id="two">
            <h1>Geeks</h1>
        </div>
        <div class="section" id="three">
            <h1>For</h1>
        </div>
        <div class="section" id="four">
            <h1>Geeks</h1>
        </div>
    </div>
</body>
</html>

CSS: We will use CSS to give our section some structure.

HTML

<style>
    /* Adding color to first section */
    #one{
        background-color: #E6358B;
    }
 
    /* Adding color to second section */
    #two{
        background-color: #22A2AF;
    }
 
    /* Adding color to third section */
    #three{
        background-color: #7CEC9F;
    }
 
    /* Adding color to four section */
    #four{
        background-color: #D8A928;
    }
 
    /* General styling to our main section */
    .content{
        width: 100vw;
        height: 80vh;
        display: flex;
        align-items: center;
        flex-wrap: nowrap;
    }
 
    /* Styling to each individual section */
    .section{
        width: 100%;
        height: 100%;
        flex: 0 0 auto;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #ffffff;
    }
    /* For hiding scoll bar */
    ::-webkit-scrollbar{
        display: none;
    }
</style>

Complete Code:

HTML

<!DOCTYPE html>
<html lang="en">
  
<head>
    <style>
  
        /* Adding color to first section */
        #one {
            background-color: #E6358B;
        }
  
        /* Adding color to second section */
        #two {
            background-color: #22A2AF;
        }
  
        /* Adding color to third section */
        #three {
            background-color: #7CEC9F;
        }
  
        /* Adding color to four section */
        #four {
            background-color: #D8A928;
        }
  
        /* General styling to our main section */
        .content {
            width: 100vw;
            height: 80vh;
            display: flex;
            align-items: center;
            flex-wrap: nowrap;
        }
  
        /* Styling to each individual section */
        .section {
            width: 100%;
            height: 100%;
            flex: 0 0 auto;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #ffffff;
        }
  
        /* For hiding scoll bar */
         ::-webkit-scrollbar {
            display: none;
        }
    </style>
</head>
  
<body>
    <!-- Main container with class content -->
    <div class="content">
  
        <!-- Four sections for our code -->
        <div class="section" id="one">
  
            <!-- Heading tag -->
            <h1>Welcome To</h1>
        </div>
  
        <div class="section" id="two">
            <h1>Geeks</h1>
        </div>
  
        <div class="section" id="three">
            <h1>For</h1>
        </div>
          
        <div class="section" id="four">
            <h1>Geeks</h1>
        </div>
    </div>
</body>
  
</html>

Output:

My Personal Notes

Related Articles

HTML

HTML

HTML