In this article, we will see how we can create a horizontal scrollable section using CSS. We are going to make different sections and make them horizontally scrollable 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 for 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.
Example: Here we are implementing the above-explained approach.
HTML
<!DOCTYPE html>
<html lang="en">
<body>
<div class="content">
<div class="section" id="one">
<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.
CSS
#one {
background-color: #E6358B;
}
#two {
background-color: #22A2AF;
}
#three {
background-color: #7CEC9F;
}
#four {
background-color: #D8A928;
}
.content {
width: 100vw;
height: 80vh;
display: flex;
align-items: center;
flex-wrap: nowrap;
}
.section {
width: 100%;
height: 100%;
flex: 0 0 auto;
display: flex;
align-items: center;
justify-content: center;
color: #ffffff;
}
::-webkit-scrollbar {
display: none;
}
|
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 fourth 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>
</head>
<body>
<div class="content">
<div class="section" id="one">
<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:
Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape,
GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out -
check it out now!
Last Updated :
15 May, 2023
Like Article
Save Article