How to Make a Div Horizontally Scrollable using CSS?
Last Updated :
15 Jul, 2025
Creating a horizontally scrollable <div> is a practical CSS technique used to handle wide content such as image galleries, tables, or long text blocks without breaking the layout. Instead of wrapping or shrinking content, horizontal scrolling allows users to scroll sideways and view hidden elements. With over 65% of modern websites using scrollable sections to enhance user experience on smaller screens, mastering this CSS trick is essential for responsive and user-friendly design.
Here are two different methods to make the div horizontal scrollable using CSS.
1. Using overflow-x and overflow-y Properties
For a horizontal scrollable bar, we can use the x and y-axis. Set the overflow-y: hidden; and overflow-x: auto; which will automatically hide the vertical scroll bar and present only the horizontal scrollbar. The white-space: nowrap; property is used to wrap text in a single line. Here the scroll div will be horizontally scrollable.
Syntax
overflow-x: auto;
overflow-y: hidden;
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.scroll {
margin: 20px auto;
padding: 15px;
max-width: 600px;
overflow-x: auto;
overflow-y: hidden;
white-space: nowrap;
border: 1px solid #ddd;
}
</style>
</head>
<body>
<h2 style="text-align: center;">
Making a Div Horizontally Scrollable Using CSS
</h2>
<div class="scroll">
HTML is the language of the web, used by billions of websites to create
the pages you see every day. Want to learn HTML from scratch and make
your web pages? This HTML tutorial is the one-stop destination for you!
To show you how fun and easy HTML is, we have provided a classic example
of writing “Hello, World!” in HTML
</div>
</body>
</html>
Output
horizontal-scroll2. Using overflow Property
The overflow: auto; is used for adding a scrollbar automatically whenever it is required and the axis hiding procedure like overflow-x: auto; is used to make only a horizontal scrollable bar.
Syntax
overflow: auto;
index.html
<!DOCTYPE html>
<html>
<head>
<style>
div.scroll {
margin: 20px auto;
padding: 15px;
width: 80%;
max-width: 600px;
overflow: auto;
white-space: nowrap;
border: 1px solid #ddd;
}
</style>
</head>
<body>
<h2 style="text-align: center;">
Making a div horizontally
scrollable using CSS
</h2>
<div class="scroll">
HTML is the language of the web, used by billions of websites to
create the pages you see every day. Want to learn HTML from scratch and
make your web pages? This HTML tutorial is the one-stop destination for
you! To show you how fun and easy HTML is, we have provided a classic
example of writing “Hello, World!” in HTML
</div>
</body>
</html>
Output
horizontal-scrollNote: CSS is the foundation of webpages, is used for webpage development by styling websites and web apps. You can learn CSS from the ground up by following this CSS Tutorial and CSS Examples.
Make a div horizontally scrollable using CSS