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

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.

set thw idth to be less than 100%, 50% perhaps. So it takes up 50% of the parent's width? — Kyle, Jun 20 '13 at 07:00
Stupid question, but is the second example meant to be a "solution" for the first? It has different content! Also, why do you have duplicate IDs in both examples? — Mr Lister, Jun 20 '13 at 07:07

score 1 · Accepted Answer · edited Oct 18 '19 at 10:18

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.

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

1 Answers1