Search code examples
javascripthtmlcsspositioningcss-position

Layout issue with absolute positioned div

I have a parent/child divs coded as;

<div class="classes scrollable">
<div class="items">
....Some content
</div>
</div>

My CSS is;

.scrollable {
    overflow: hidden;
    position: relative;
    width: 100%;
}
.scrollable .items {
    clear: both;
    position: absolute;
    width: 20000em;
}

Actually my "items" div has it's "left" position changed dynamically via JS (for kind of carousel effect...scrolls to left/right)

Also bcoz it is an absolute div, I cannot get the parent div "scrollable" to expand as per "items" content.

How do I fix this issue ?

Solution

  • You can set height on the .scrollable. The inner scrolling div is just one row, right?