Make a div horizontally scrollable using CSS - GeeksforGeeks

05 Nov, 2021
In this article, we will know to design the horizontally scrollable div using CSS, & will see its implementation through the example. We can make a div horizontally scrollable by using the CSS overflow property. There are different values in the overflow property. For eg, 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. For horizontal scrollable bar use the x and y-axis. Set the overflow-y: hidden; and overflow-x: auto; that 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.
Example 1: In this example, we have used the overflow-y: hidden; and overflow-x: auto; to make div horizontally scrollable.
HTML
<!DOCTYPE html><html> <head>    <title>        Making a div horizontally        scrollable using CSS    </title>    <style>    h1 {        color: Green;    }         div.scroll {        margin: 4px, 4px;        padding: 4px;        background-color: #08c708;        width: 300px;        overflow-x: auto;        overflow-y: hidden;        white-space: nowrap;    }    </style></head> <body>    <center>        <h1>GeeksforGeeks</h1>        <h2>        Making a div horizontally        scrollable using CSS      </h2>        <div class="scroll">             It is a good platform to learn programming.             It is an educational website. Prepare for the             Recruitment drive of product based companies             like Microsoft, Amazon, Adobe etc with a free             online placement preparation course. The course             focuses on various MCQ's & Coding question likely             to be asked in the interviews & make your upcoming             placement season efficient and successful. Also,             any geeks can help other geeks by writing articles             on the GeeksforGeeks, publishing articles follow few             steps that are Articles that need little modification             or improvement from reviewers are published first.             To quickly get your articles reviewed, please refer             existing articles, their formatting style, coding style,             and try to make you are close to them. In case you are a             beginner, you may refer Guidelines to write an Article        </div>    </center></body> </html>
Output:
Using overflow-y: hidden; & overflow-x: auto;
Example 2: In this example, we have used the auto in place of overflow-y: hidden; and overflow-x: auto; to make div horizontally scrollable.
HTML
<!DOCTYPE html><html> <head>    <title>         Making a div horizontally         scrollable using CSS     </title>    <style>    h1 {        color: Green;    }         div.scroll {        margin: 4px, 4px;        padding: 4px;        background-color: #08c708;        width: 300px;        overflow: auto;        white-space: nowrap;    }    </style></head> <body>    <center>        <h1>GeeksforGeeks</h1>        <h2>        Making a div horizontally        scrollable using CSS      </h2>        <div class="scroll">          It is a good platform to learn programming.          It is an educational website. Prepare for          the Recruitment drive of product based companies          like Microsoft, Amazon, Adobe etc with a free          online placement preparation course. The          course focuses on various MCQ's & Coding question          likely to be asked in the interviews & make your          upcoming placement season efficient and successful.          Also, any geeks can help other geeks by writing          articles on the GeeksforGeeks, publishing articles          follow few steps that are Articles that need little          modification or improvement from reviewers are          published first.          To quickly get your articles reviewed, please refer          existing articles, their          formatting style, coding style, and try to make you          are close to them. In case you are a beginner, you          may refer Guidelines to write an Article        </div>    </center></body> </html>
Output:
Using overflow: auto;
HTML is the foundation of webpages, is used for webpage development by structuring websites and web apps. You can learn HTML from the ground up by following this HTML Tutorial and HTML Examples.
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.
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.
bhaskargeeksforgeeks
CSS-Misc
HTML-Basics
CSS
HTML
Web Technologies
Web technologies Questions
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to insert spaces/tabs in text using HTML/CSS?
How to create footer to stay at the bottom of a Web page?
How to update Node.js and NPM to next version ?
Types of CSS (Cascading Style Sheet)
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to insert spaces/tabs in text using HTML/CSS?
How to set the default value for an HTML <select> element ?
How to update Node.js and NPM to next version ?
How to set input type date in dd-mm-yyyy format using HTML ?