How to make divs remain on a single line within a hidden div

[Jezternz]

Hi,
So what I want to do, is create a file tabs like bar. This will include a list of all pages open in my web app. There is likely to be more open then what fits on the page bar, so they will need to be scrolled along.

My current setup is as follows, it is a container, with overflow hidden, a scrolling container, and all the pages open 'page'. The scrolling container has width:auto and can be scrolled along by setting the left value.
However the problem is, if there are more pages then there is room for, instead of all continueing along the right, they stack down and are hidden where I would like them to continue along the right and be hidden when outside of the container.

HTML:

<div id="container">
    <div id="scroller">
        <div class="page">brick1</div>
        <div class="page">brick2</div>
        <div class="page">brick3</div>
        <div class="page">brick4</div>
    </div>
</div>

CSS:

#container{position:absolute;left:100px;right:100px;top:0;height:20px;}
#scroller{position:absolute;left:0;top:0;bottom:0;width:auto;}
.page{float:left;}

Cheers, J

[Sudaraka]

Hi,

Your description is on the right path, but your code doesn't confirm your description.

First of all you have a .brick in the CSS, but on HTML I don't see a brick class assigned to any element. I think you mean .page there?

Next I would switch the position (depth in DOM )of the two DIV tags #container and #scroller, Because the inner DIV (#container) must have fixed with enough to display all the left floated tabs across (.page DIV tags) otherwise they would wrap down.
Then the outter DIV (#scroller) must be also set to a fixed with (most probably some thing smaller than the width of #container) and set the overflow-x (scroll or auto).

See the sample code here http://jsfiddle.net/L8PeW/

[Jezternz]

Thanks Sudaraka, Yep was meant to be .page there.
I understand what you are saying, and that would work, however because I want to have a dynamic number of '.pages' I would prefer not to have a static width, as it could be any possible number. So I guess I could set the width to 9999px, but this seems rather messy, is there anyway I can get it to run with a width:auto?

Cheers, J

[Sudaraka]

Unfortunately no, setting width:auto on a block element will only make the right edge of that element to expand only up to it's parents right edge.

Since your objective is to have tab strip with dynamic number of tabs, why not use a ready made widget like jQuery Tabs?

http://jqueryui.com/demos/tabs/

[Jezternz]

Thanks for the tips, I was really just wondering if there was a parameter you could set on it, to not force children to be wrapped. I will look into jquery tabs, cheers.