How to make a row of divs flow in one line inside another div?

Question

I have a div "container", say 400px width, with a left-floated divs inside — "box" 100px width. There are six of "box" divs so their summary width is larger than 400px which causes that line of divs to get wrapped and I get two lines, with 4 and 2 elements each. How can I make these 6 divs go in one row, one line instead of two?

Answer 1

You simply need white-space: nowrap on the parent element with display: inline-block on the children. Live demo here (click).

  <div class="container">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>

css:

.container {
  width: 400px;
  background: black;
  white-space: nowrap;
  overflow: scroll;
}

.container > div {
  height: 50px;
  width: 100px;
  background: #555;
  display: inline-block;
  margin: 10px;
}