Make a div horizontally scrollable using CSS
In this article, we will learn how to design a 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.
These are the following ways to make a div horizontally scrollable using CSS:
Table of Content
- By setting the overflow-y: hidden and overflow-x: auto
- By using overflow: auto; property
By setting the overflow-y: hidden and overflow-x: auto
For a horizontal scrollable bar 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.
Example: In this example, we have used the overflow-y: hidden; and overflow-x: auto; to make the 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 >w3wiki</ 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 Beginner can help other Beginner by writing articles on the w3wiki, 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:
By using overflow: auto; 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.
Example: 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 >w3wiki</ 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 Beginner can help other Beginner by writing articles on the w3wiki, 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:
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.
Contact Us