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
(Credit to user totymedli for the code help)
<button id="button1">Add box</button> <div id="outer"></div>
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?
Actually, you can use
inline-block, just add
vertical-align:top and it will work as expected.
It’s worth noting that the default value of
baseline; that’s why the
margin didn’t seem to be taking effect.
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.