How do I make a container div only overflow horizontally without using “display:inline-block” for its inner divs?

I’m trying to create <div>s within another <div> at the click of a button. When the button is clicked, a new inner <div> is created (within the outer <div>) with a unique id. Each inner <div> also has a random margin-top CSS value. All this works but I would like to make the outer <div> only scroll horizontally. Therefore, the inner <div>s all have to be created inline. However I cannot use display:inline-block for the inner <div>s because that removes the random margin-top functionality.

(Credit to user totymedli for the code help)

HTML

<button id="button1">Add box</button>
<div id="outer"></div>

CSS

#outer {
  position:absolute;
  white-space:nowrap;
  height:118px;
  overflow:auto;
  width:100%;
  padding:2px;
}

.box{
  float:left;
  width:48px;
  height:48px;
  background-color:#000;
  margin-left:5px;
}

Javascript

var number = 0;
document.getElementById("button1").addEventListener("click", pressButton, false);
function pressButton() {
  ++number;
  makeDiv(number);
};

function makeDiv(x) {
  var innerDiv = document.createElement("div");
  outer.appendChild(innerDiv);
  innerDiv.className += " box";
  innerDiv.setAttribute("id", "innerDiv" + x);
  innerDiv.setAttribute("style", "margin-top:" + Math.floor(Math.random()*51) + "px;");
};

Here is the working Demo.

As you can see, creating new inner <div>s works and each of them has a random margin-top. How do I make the outer <div> scroll horizontally and prevent the inner <div>s from breaking to the next line?


solution

Actually, you can use inline-block, just add vertical-align:top and it will work as expected.

UPDATED EXAMPLE

It’s worth noting that the default value of vertical-align is baseline; that’s why the margin didn’t seem to be taking effect.

.box{
  display:inline-block;
  vertical-align:top;
  width:48px;
  height:48px;
  background-color:#000;
  margin-left:5px;
}

If, for some reason, you are insistent on floating the elements (which I don’t recommend), you would simply have to increase the width of the parent element to therefore contain the children elements.