Layout issue with absolute positioned div

Question

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 ?

Answer 1

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

Answer 2

What keeps you from not making .items absolutely positioned?
Can't you just use something like margin-left: -100px , instead of left: -100px; ?

Working example of what I mean: http://jsfiddle.net/fk5Q2/