How to force the horizontal scroll bar to appear?


Tags: html,css,scrollbar

Problem :

Consider the following code:

HTML:

<div id="wrapper">
    <div class='a'></div>
    <div class='a'></div>
    <div class='a'></div>
    <div class='a'></div>
    <div class='a'></div>
</div> 

CSS:

#wrapper {
    width: 300px;
    border: 1px solid black;
    overflow: auto;
}
.a {
    width: 70px;
    height: 70px;
    border: 1px solid red;
    float: left;
}   

How could I force the horizontal scroll bar to appear rather than displaying the red div's in the second line ?



Solution :

Try this:

#wrapper {
  width: 300px;
  border: 1px solid black;
  overflow: auto;
  white-space: nowrap;
}
.a {
  width: 70px;
  height: 70px;
  border: 1px solid red;
  display: inline-block;
}

It will give you spacing between the inner divs - put them all in one line to remove those.


    CSS Howto..

    how to add parent class in css file?

    How do I make the rest of the page fade to black once my div loads and fade out once the div is closed?

    How to set css to more selectors when one of it is $(this)?

    What is the correct css for the list of results to show correctly in this situation? [closed]

    How to select every 4th div inside another div CSS Selector [closed]

    How to place an HTML element over another using CSS

    How to fix this flexbox alignment issue due to unsupported 'flex-grow' in IE10?

    How to debug css in IE?

    How can i edit font-size and font-family option in css file using sed?

    How to load .css file from parent directory with .htaccess rule?

    How to implement a navbar with HTML / CSS

    How to put a button inside of a text entry field in a form on a website using javascript, css, html

    How to do isometric 3D in CSS

    show a website loading image using only CSS (not Javascript or jQuery)

    How can I use :hover with multiple classes

    How to provide some space between two lines of same text in css

    How to show an arrow down symbol with CSS

    CSS Selector-How to locate Parent Element

    Using jQuery, how to find out if CSS selector “input[type=text]” is natively supported by browser?

    HTML/CSS - how to position an image in the above the right and left corner of a panel

    CSS: how do I position my slideshow counter up into the slideshow

    How to Fade in AFTER the Page has Loaded: Javascript

    How can I make a fluid width header with text-overflow ellipsis without wrapping?

    How to use both -moz- and -webkit- css property to support different browsers?

    How to align an image on css?

    How to set height of child div while hovering over a parent div in css?

    How to set two directions for flex-box css?

    How to use horizontal scroll when you have way many columns

    How to create a header which fills the background with a color throughout the width

    using the unorthodox `head {display: block}` to show text to user?