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

Question

I am trying to create <div>inside another <div>with the click of a button. When the button is pressed, a new internal <div>(inside the external <div>) is created with a unique identifier. Each inner one <div>also has a random margin-topCSS value . It all works, but I would like to make the external <div> only scroll horizontally . Therefore, the internal <div>must be created inline. However, I cannot use display:inline-blockit internally <div>because it removes random margin-topfunctionality.

(Confirm user totymedli for help with code)

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;");
}; 

Below is a working demo .

As you can see, creating new internal ones <div>works, and each one has a random one margin-top. How to make the external <div>scroll horizontally and prevent the internal from <div>moving to the next line?

Answer 1

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

UPDATED EXAMPLE

It is worth noting that the default value vertical-alignis baseline; why margindoesn’t seem to come into force.

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

- ( ), , .

Answer 2

:

inline-block inline-table

Fiddle

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