Variable width tabs (auto width)

Question

I am trying to create tabs using CSS instead of images. I want the tabs to automatically adjust to the content within them, however I want them to have a max-width of 200px. I would like for the tab width to adjust to the content automatically so that the tabs will have variable widths but maintain the 20px left/right padding. Can anyone explain how to go about this?

Here's my HTML so far:

<div class="tab">
TEST
</div>

And my CSS:

.tab {
    text-align:center;
    background:#000;
    padding:0 20px;
    max-width:200px;
    border-radius: 10px 10px 0 0;
    color:#fff;
}

And a JSFiddle!

Thanks!

score 1 · Accepted Answer · answered Jan 14 '14 at 19:54

1

Use the display:inline css or make the div a span:

<span class="tab">
TEST
</span>

answered Jan 14 '14 at 19:54

Dmitry Sadakov

2,128
3
19
34

Thank you! I ended up doing display:table-cell because I want to vertically align the text, but display:inline also worked. Will accept this answer in 6 minutes. – user3101431 Jan 14 '14 at 19:55

score 1 · Answer 2 · answered Jan 14 '14 at 19:55

1

add display: inline-block to make it collapse to the width of the content.

answered Jan 14 '14 at 19:55

Mr. Mayers

366
1
6

Variable width tabs (auto width)

2 Answers2