How to create horizontal scrollable sections using CSS ?

27 Oct, 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 scroll 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:
rajeev0719singh
CSS-Properties
CSS-Questions
HTML-Questions
HTML-Tags
CSS
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to update Node.js and NPM to next version ?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to insert spaces/tabs in text using HTML/CSS?
How to create footer to stay at the bottom of a Web page?
CSS to put icon inside an input element in a form
Installation of Node.js on Linux
Top 10 Projects For Beginners To Practice HTML and CSS Skills
Difference between var, let and const keywords in JavaScript
How to insert spaces/tabs in text using HTML/CSS?
How to fetch data from an API in ReactJS ?