CODEWITHSUNDEEP
htmlcss
Ravi Majithia
Ravi Majithia

Reputation: 276

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

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.

Upvotes: 2

Views: 593

Answers (1)

Roman Abt
Roman Abt

Reputation: 444

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.

Upvotes: 1

Related Questions