Skip to content
Related Articles

Related Articles

Save Article
Improve Article
Save Article
Like Article

Make a div horizontally scrollable using CSS

  • Difficulty Level : Easy
  • Last Updated : 30 Jul, 2021

Making a div horizontally scrollable is easy by using CSS overflow property. There are different values in overflow property.

For example overflow: auto; and the axis hiding procedure like overflow-x: auto;. It will 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 horizontal scrollbar. The white-space: nowrap; property is used to wrap text in a single line. Here the scroll div will be horizontally scrollable.

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.

Example 1:

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:



Example 2: In this example use 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:

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.




My Personal Notes arrow_drop_up
Recommended Articles
Page :