Question

Hi i have this a div called “nav” that contains divs with a class “thumbs”. Im trying to create a table of contents like div that can be scrolled to display further thumbnails.

this is my CSS so far: (note that each thumbs are position:absolute and is left: positioned accordingly)

#nav {
    position:absolute;
    width:768px;
    height:214px;
    bottom:0px;
    /*-webkit-transform:translateY(214px);*/
    background:gray;
    overflow:auto;
}
.thumbs {
    position:absolute;
    width:80px;
    height:100px;
    margin:10px 10px 10px 10px;
    background:white;
}

I want it to be scrollable so that if the thumbnails exceed 768px (width of nav) it can be scrolled to the left to view more.

Thanks

edit: I forgot to mention that I am doing this in PhoneGap. It will be a mobile app. thanks!

Answer 1

Remove position: absolute; and add float: left; from your thumbs class. That should do it.

UPDATE

If the number of thumbs are known in advance, the inner div’s width can be set via CSS. Otherwise, it can be set onload or whenever a thumb is added/removed via JS.

$('#div').css('width', ($('.thumbs').length * $('.thumbs:first').outerWidth(true)) + 'px');