Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
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.
Ways to make div horizontally scrollable
There are two ways to make div horizontally scrollable as mentioned below.
Horizontal scrollable div using overflow-x Property
In this approach we have to create a fixed height 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 whitespace, so the content of the div can be continues on the same line.
- Now we will use CSS overflow-x property ans set "overflow-x: auto;" or "overflow-x: scroll;" this will be the cause a horizontal scrolling mechanism on the div element.
Example
In this example we have implemented the avobe described approach.
<!DOCTYPE html>
<html>
<head>
<title>
Horizontal scrollable div using overflow-x Property
</title>
<style>
div.scroll {
margin: 4px, 4px;
padding: 4px;
background-color: yellow;
width: 300px;
overflow-x: auto;
white-space: nowrap;
border: 2px solid black;
}
</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.
</div>
</body>
</html>
Horizontal scrollable div using overflow Property
In this approach we have to create a fixed height 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 whitespace, so the content of the div can be continues on the same line.
- Similarly, we will use CSS overflow property ans set "overflow: auto;" or "overflow: scroll;" this will be the cause a horizontal scrolling mechanism on the div element.
Example
In this example we have implemented the avobe described approach.
<!DOCTYPE html>
<html>
<head>
<title>
Horizontal scrollable div using overflow Property
</title>
<style>
div.scroll {
margin: 4px, 4px;
padding: 4px;
background-color: yellow;
width: 300px;
overflow: auto;
white-space: nowrap;
border: 2px solid black;
}
</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.
</div>
</body>
</html>
Conclusion
In this article we have learned to create horizontally scrollable div in two different approaches in the first approach we have used CSS overflow-x property where we can use 'scroll' or 'auto' value. In the second approach we have used CSS overflow property where similarly we can use 'scroll' and 'auto' value to make a horizontally scrollable div. But we need to keep this in mind that content of the div should capable of creating the scenario where the horizontal scroll is required. In both the example we have forcefullty created that by using CSS white-space property.
6K+ Views
