css - Adjust div width by amount of internal list elements

Question

I have a type of navigation that is contained within a 'pill' of sorts.

I need the pill (surrounding container) to automatically resize based on the amount of elements in the navigation.

I have the pill container centered on the page, so I don't think a float: left; or float: right; will work because it will override the margin: 0 auto;.

Here is a fiddle with an example of my issue: http://jsfiddle.net/TylerB/EU6XG/1/

How can I set this div element's width based on the amount of navigation items in the list?

Answer 1

Simply add display: table

DEMO http://jsfiddle.net/kevinPHPkevin/EU6XG/6/

.tabset-container {
    margin: 0 auto;
    position: relative;
    top: 25px;
    z-index: 1;
    background: transparent;
    text-align: center;
    display:table;
}

Also add overflow: hidden to the tabs so then your rounded corners still show

.tabset {
        overflow:hidden;
}

Answer 2

I was going in jQuery direction - fiddle (get the width and pass it trough .css()) + display: inline-block on .tabset