Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Create Horizontal Scrollable Sections in CSS
A horizontal scrollable section is a popular web design pattern used to showcase content that extends beyond the width of the viewport. This design pattern allows users to scroll horizontally, providing a unique and engaging way to display large images, galleries, timelines, maps, and other content.
Syntax
.container {
overflow-x: auto;
white-space: nowrap;
}
.section {
display: inline-block;
width: 100vw;
vertical-align: top;
}
Key Properties
| Property | Value | Purpose |
|---|---|---|
overflow-x |
auto or scroll
|
Enables horizontal scrolling |
white-space |
nowrap |
Prevents sections from wrapping to next line |
display |
inline-block |
Makes sections display side-by-side |
vertical-align |
top |
Aligns sections to container top |
Example: Basic Horizontal Scrollable Sections
The following example creates horizontal scrollable sections with different background colors
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Horizontal Scrollable Sections</title>
<style>
.container {
overflow-x: auto;
white-space: nowrap;
padding: 20px 0;
}
.section {
display: inline-block;
width: 80vw;
height: 400px;
margin-right: 20px;
vertical-align: top;
padding: 30px;
border-radius: 10px;
color: white;
font-family: Arial, sans-serif;
}
.section1 { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); }
.section2 { background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); }
.section3 { background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); }
.section4 { background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%); }
.section h2 {
margin: 0 0 15px 0;
font-size: 24px;
}
.section p {
font-size: 16px;
line-height: 1.6;
}
</style>
</head>
<body>
<div class="container">
<div class="section section1">
<h2>Section 1</h2>
<p>This is the first horizontal section with a gradient background. Users can scroll horizontally to view more content.</p>
</div>
<div class="section section2">
<h2>Section 2</h2>
<p>The second section with a different gradient. Each section takes 80% of the viewport width for optimal viewing.</p>
</div>
<div class="section section3">
<h2>Section 3</h2>
<p>Third section demonstrating the horizontal scrolling effect. The content flows naturally from left to right.</p>
</div>
<div class="section section4">
<h2>Section 4</h2>
<p>Final section showing how multiple content areas can be displayed horizontally with smooth scrolling.</p>
</div>
</div>
</body>
</html>
Four colorful gradient sections displayed horizontally with smooth scrolling. Each section has a different background gradient and contains text content. Users can scroll horizontally to view all sections.
Alternative Method: Using Flexbox
You can also create horizontal scrollable sections using CSS Flexbox
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flexbox Horizontal Scroll</title>
<style>
.flex-container {
display: flex;
overflow-x: auto;
gap: 20px;
padding: 20px;
}
.flex-section {
flex: none;
width: 300px;
height: 250px;
background-color: #3498db;
border-radius: 8px;
padding: 20px;
color: white;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
}
.flex-section:nth-child(2) { background-color: #e74c3c; }
.flex-section:nth-child(3) { background-color: #2ecc71; }
.flex-section:nth-child(4) { background-color: #f39c12; }
</style>
</head>
<body>
<div class="flex-container">
<div class="flex-section">
<h3>Card 1</h3>
<p>Flexbox approach for horizontal scrolling</p>
</div>
<div class="flex-section">
<h3>Card 2</h3>
<p>Clean and modern design</p>
</div>
<div class="flex-section">
<h3>Card 3</h3>
<p>Responsive and flexible</p>
</div>
<div class="flex-section">
<h3>Card 4</h3>
<p>Easy to implement</p>
</div>
</div>
</body>
</html>
Four card-style sections with different colors (blue, red, green, orange) arranged horizontally. Each card has centered content with a title and description, creating a clean scrollable interface.
Best Practices
Keep it Simple: Avoid cluttering each section with too much information. Focus on clear and concise content.
Use Consistent Design: Maintain consistent styling across all sections for a cohesive user experience.
Provide Visual Cues: Use scroll indicators or shadows to hint at additional content.
Consider Mobile: Test horizontal scrolling on mobile devices for optimal touch interaction.
Conclusion
Horizontal scrollable sections provide an elegant way to display content that extends beyond the viewport width. Using CSS properties like overflow-x: auto and white-space: nowrap, you can create engaging interfaces for galleries, timelines, and content showcases without requiring additional libraries.
1K+ Views
