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

Question

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?

Answer 1

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.

Answer 2

Try this code:

Instead of inline-block ,you can also use inline-table

Fiddle

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