css shrinkwrap div wider than its parent

Question

I'm building a tab bar in css, and want it to be able to handle having more tabs than can be shown on the screen. My HTML is structured roughly:

<div id="tabbar">
    <div id="tablist"></div>
</div>

css:

#tabbar     {position:absolute;width:100%;height:24px;overflow:hidden;}
#tablist    {position:absolute;top:0px;left:0px;height:24px;}
div.tab     {float:left;}

with all tabs inserted into #tablist. So long as the there are few enough tabs that they don't overflow, #tablist shrinkwraps correctly and I can get their collective widths. However, as soon as there are more than can fit on the screen, they wrap to the next line (though you can't see it, obviously, due to #tabbar's overflow:hidden), and #tablist's width ceases to accurately represent the total widths of the tabs.

I could set #tablist's width through javascript manually, adding the total widths of each tab, but this seems an awfully messy and error-prone approach. I could also use a table, but I'd rather not since it violates the whole css-for-layout theory.

What I'm looking for, in essence, is a means to shrinkwrap a div around its contents without its contents being wrapped to a second line due to the width of the div's parent.

EDIT: The purpose of this is to build a tab bar which allows the user to scroll when there are too many tabs, but in order to do that I need to know when the width of #tablist, or the total widths of all tabs, is greater than the width of #tabbar, so that I can activate the 'scroll right' button. I also need to know the exact width, not just the fact that it's wider, so that I know how far it should be able to scroll.

Answer 1

From what I understand, you want to keep the tabs on one line even if they're not shown on the screen, perhaps you'll be scrolling them? I could be wrong, but if I'm correct - you can simply set a big enough width on #tablist to float all tabs, which will then be hidden by the parent (#tabbar) overflow:hidden.

#tablist {width: 10000px}