Display, generated div's horizontally within a container with scrollbar - html

Question

I am trying to display dynamic generated div's horizontally with scroll bar. There can be n number of div's.
Below is my Code:
HTML (index.html)
<div style="width:100%;float:left;" id="old">
<div>
<h1>First Div</h1>
<div id="R1">
<h1>First Div Internal</h1>
<a id="R1_index" class="close_page" href="javascript:void(0)">Close</a>
</div>
</div>
<div>
<h1>Second Div</h1>
<div id="R2">
<h1>Second Div Internal</h1>
<a id="R2_index" class="close_page" href="javascript:void(0)">Close</a>
</div>
</div>
</div>
I follow this link for solution.
But when dynamic div's load, structure looked messed up.
Here is the messy look:
HTML (index.html)
<div style="width:100%;float:left;" id="old">
<div id="items">Missing Internal Content</div>
<div id="items">Missing Internal Content</div>
</div>
Please help me guys.

Answer 1

i imagin the problem is that the div's in the container (id="old" in your example) are not next to each other, but instead beneath.
if that is your problem, you add the following styles to your container:
#old {
overflow: auto;
white-space: nowrap;
}
and make the childern-divs inline-block elements:
#old > div {
display: inline-block;
}
then it should work as expected. see the working solution:
* {
padding: 0;
margin:0;
}
#container {
width: 300px;
height: 100px;
overflow: auto;
white-space: nowrap;
}
.element {
display: inline-block;
}
.box {
width: 100px;
height: 100px;
background: lightgrey;
}
<div id="container">
<div class="element">
<div class="box">
<h1>1</h1>
</div>
</div>
<div class="element">
<div class="box">
<h1>2</h1>
</div>
</div>
<div class="element">
<div class="box">
<h1>3</h1>
</div>
</div>
<div class="element">
<div class="box">
<h1>4</h1>
</div>
</div>
<div class="element">
<div class="box">
<h1>5</h1>
</div>
</div>
<div class="element">
<div class="box">
<h1>6</h1>
</div>
</div>
<div class="element">
<div class="box">
<h1>7</h1>
</div>
</div>
<div class="element">
<div class="box">
<h1>8</h1>
</div>
</div>
</div>
otherwise please provide a better example/description of what the problem exactly is.