Skip to content
Related Articles

Related Articles

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 arrow_drop_up
Recommended Articles
Page :