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.