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
Make a div horizontally scrollable using CSS
To make a div horizontally scrollable we will need to use the CSS overflow property. In this article we will show all the possible ways to make div horizontally scrollable.
First, let's understand why we need to make a div horizontally scrollable. For example, the width of the parent div element is 500px, or the screen size is 500px. Now, the content of the div element is 1500px. So, if we don't make the parent div horizontally scrollable, it breaks the UI of the application. So, we can make it scrollable, and users can scroll to see the invisible content.
Syntax
/* Method 1: Using overflow-x property */
selector {
overflow-x: auto | scroll | hidden;
white-space: nowrap;
}
/* Method 2: Using overflow property */
selector {
overflow: auto | scroll | hidden;
white-space: nowrap;
}
Ways to make div horizontally scrollable
There are two ways to make div horizontally scrollable as mentioned below
Method 1: Using overflow-x Property
In this approach we have to create a fixed width div so the scroll can appear on the div.
- We will use CSS white-space property and set "white-space: nowrap;" to collapse the div into a single line, so the content of the div can continue on the same line.
- Now we will use CSS overflow-x property and set "overflow-x: auto;" or "overflow-x: scroll;" this will cause a horizontal scrolling mechanism on the div element.
Example
In this example we have implemented the above described approach ?
<!DOCTYPE html>
<html>
<head>
<title>Horizontal scrollable div using overflow-x Property</title>
<style>
.scroll {
margin: 10px 0;
padding: 10px;
background-color: #f0f8ff;
width: 300px;
overflow-x: auto;
white-space: nowrap;
border: 2px solid #333;
font-family: Arial, sans-serif;
}
</style>
</head>
<body>
<h3>Horizontally Scrollable div Element</h3>
<p>
Here in this example, we have used
CSS white-space, and overflow-x property.
</p>
<div class="scroll">
To make a div horizontally scrollable we will need to use the CSS overflow property.
In this article we will show all the possible ways to make div horizontally scrollable.
This content is intentionally long to demonstrate horizontal scrolling functionality.
</div>
</body>
</html>
The output of the above code is ?
A blue-bordered div with light blue background appears. The text flows in a single line and when it exceeds the 300px width, a horizontal scrollbar appears at the bottom of the div, allowing users to scroll horizontally to see the hidden content.
Method 2: Using overflow Property
In this approach we have to create a fixed width div so the scroll can appear on the div. The difference in this approach is that it can create vertical scroll as well.
- We will set "white-space: nowrap;" to collapse the div into a single line, so the content of the div can continue on the same line.
- Similarly, we will use CSS overflow property and set "overflow: auto;" or "overflow: scroll;" this will cause a horizontal scrolling mechanism on the div element.
Example
In this example we have implemented the above described approach ?
<!DOCTYPE html>
<html>
<head>
<title>Horizontal scrollable div using overflow Property</title>
<style>
.scroll {
margin: 10px 0;
padding: 10px;
background-color: #ffe6f0;
width: 300px;
height: 80px;
overflow: auto;
white-space: nowrap;
border: 2px solid #d63384;
font-family: Arial, sans-serif;
}
</style>
</head>
<body>
<h3>Horizontally Scrollable div Element</h3>
<p>
Here in this example, we have used
CSS white-space, and overflow property.
</p>
<div class="scroll">
To make a div horizontally scrollable we will need to use the CSS overflow property.
In this article we will show all the possible ways to make div horizontally scrollable.
This content is intentionally long to demonstrate both horizontal and potential vertical scrolling functionality.
</div>
</body>
</html>
The output of the above code is ?
A pink-bordered div with light pink background and fixed height appears. The text flows in a single line and when it exceeds the 300px width, a horizontal scrollbar appears. Since the overflow property is used instead of overflow-x, both horizontal and vertical scrollbars may appear if needed.
Key Differences
| Property | Horizontal Scroll | Vertical Scroll | Use Case |
|---|---|---|---|
overflow-x |
Yes | No | Only horizontal scrolling needed |
overflow |
Yes | Yes (if needed) | Both horizontal and vertical scrolling |
Conclusion
Both overflow-x and overflow properties can create horizontal scrolling when combined with white-space: nowrap. Use overflow-x for horizontal-only scrolling and overflow when you might need both directions. The key is ensuring content width exceeds the container width to trigger the scroll mechanism.
6K+ Views
