CSS Navigation with x Number of Tabs having same padding

Question

I am trying to figure out a certain layout with css.

[..tab1 random text..][..tab2 more random text..][..tab3 other random text..][..tab4..][..tab5..]

These are the requirements:

All tabs are inside a div with fixed width.
Tabs should not expand over that div, but should fill it out.
Number of tabs can vary.
Each Tab has unknown width (depends on text inside).
All Tabs should share the same padding (space from outer most letters to inner border of tab should be the same, represented by the ".." above). This padding does not have to be fixed but should be the same among the tabs.
No Calculations. All should work without modifying the css if one ore more tabs are added or removed.

I tried it with tables:

<table>
    <tr>
        <td>Tab1</td>
        <td>Tab 1 Space</td>
        <td>Tab 2 more Space</td>
        <td>Tab 3 even more Space</td>
        <td>Tab 4</td>
    </tr>
</table>

(fiddle)

The Problem I face is, that the padding varies based on width of the table and number of tabs.

I think what you're asking might not be possible with css alone, you would probably need some js to this. Would be happy to be proven wrong, would be good to see someone do this. — wushudude, Nov 07 '13 at 15:15

score 5 · Answer 1 · answered Nov 13 '13 at 19:42

5

IF I understand all of the constraints correctly, this is easily accomplished with the table and table-cell display properties.

Set your containing div width:

.container {
width: 800px;
}

then set your ul to have the table display:

ul {
display: table;
width: 100%;
}

finally, set your li's to be table-cells:

li {
display: table-cell;
}

See the full example: http://codepen.io/anon/pen/IfbHs

answered Nov 13 '13 at 19:42

2507rkt3

21,311
1
18
15

close, but this doesnt meet the criteria: "All Tabs should share the same padding" – Björn Nov 16 '13 at 17:43
Hmm - when I look at the box-model in Chrome DevTools, it looks like each
gets 40px of padding. Are you seeing something different?

2507rkt3

Nov 17 '13 at 02:32

You are right, the values add up. But when I add a couple of more li tabs, the tabs expand over the div.container, which violates: "Tabs should not expand over that div, but should fill it out", see http://codepen.io/anon/pen/xJHeG. Still very close. – Björn Nov 17 '13 at 10:08

Well - like ScottS said, that's impossible. You can either have consistent padding, or the ability to add as many items as you want. If you want consistent padding, then add a padding declaration to the

's. If you want to add infinite items, remove the padding declaration.

– 2507rkt3 Nov 17 '13 at 12:59

score 3 · Answer 2 · answered Nov 07 '13 at 10:35

3

remove the width for table it will be perfect

http://jsfiddle.net/SSq7A/2/

table {
    border-spacing: 1px;
}

td {
    padding:10px;
    background: #40404c;
    text-align: center;
    color: white;
    font-size: 11px;
}

answered Nov 07 '13 at 10:35

radha

782
4
8

this doenst meet the mentioned requirement "All tabs are inside a div with fixed width" – Björn Nov 07 '13 at 10:42
u mean that all td should hav fixed width? – radha Nov 07 '13 at 10:54
no, each Tab has unknown width (depends on text inside). and it doenst have to be a table, can be just divs too. – Björn Nov 07 '13 at 11:06

ScottS · Answer 3 · 2013-11-13T17:04:50.690

Impossible with Pure CSS given Constraints

It appears that what you are asking is in most cases mathematically impossible (except text being the same length) with only css because of your constraints.

Consider an example of just two tabs and the following four particular (and conflicting) requirements of yours (assume 500px fixed width container; requirements have been reordered for illustration):

(1) Each Tab has unknown width (depends on text inside).

Assume Tab2 has text twice as long as Tab1. So for the illustration, Tab1 = 10px, Tab2 = 20px, then...

(2) All Tabs should share the same padding (space from outer most letters to inner border of tab should be the same, represented by the ".." above). This padding does not have to be fixed but should be the same among the tabs.

and...

(3) No Calculations. All should work without modifying the css if one ore more tabs are added or removed.

Self-explanatory enough, but...

(4) Tabs should not expand over that div, but should fill it out.

This means one of the following:

A. Each Tab will be 50% of the width and text width remains unaltered, so Tab1 = 120px 10px 120px, Tab2 = 115px 20px 115px, which does not meet (1) as overall size of both will be same width, or (2) as padding will vary in width per the illustration, but does possibly meet (3) and (4). This is not what you desire.

B. Each Tab will be 50% of the width, but text width must stretch for Tab1 or compress for Tab2 to make the text width equal. This still technically fails to fulfill (1), but does meet (2) & (4) as both are set to either 120px 10px 120px or 115px 20px 115px, as the text gets distorted in some way to "fit" the space. Whether this is possible without doing (3) is questionable, but probably irrelevant, as I'm sure this is not what you desire.

C. Each Tab will be set as you desire for (1) and (2) with (2) at some fixed amount (say 10px), which leaves gaps between or around the tabs, something like 10px 10px 10px, gap of 430px, then 10px 20px 10px. This will possibly be able to meet (3), but does not meet (4) as they will not really "fill" the space of the fixed container--there is going to be "gaps" somewhere. This is not what you want.

D. What you ultimately state you want is for each Tab to have padding set to be equal, which can be done with respect to (1) and (2), but not with your constraint (3), as a calculation is needed. In the example, it is (500px - 30px) / 4 = 117.5px. This makes the tabs 117.5px 10px 117.5px and 117.5px 20px 117.5px. But as you can see, since text is flexible width, this has to be done dynamically, roughly with the formula:

(containerWidth - totalTextWidths) / (2 x numTabs) = padding

If you want some type of small gap between tabs, then that would need to be added into the formula (here it assumes a 2px gap, so gapWidths = ((numTabs - 1) x 2px)):

(containerWidth - totalTextWidths - gapWidths) / (2 x numTabs) = padding

So the constraints you give make the solution impossible--either a calculation has to be allowed for, or you need to rethink how you want your tabs to display.

Sijav · Answer 4 · 2013-11-13T19:24:34.140

1

are you looking for something like this? => http://jsfiddle.net/sijav/SSq7A/12/ I have added a width:1%; and whole is:

td {
    padding: 5px 0;
    background: #40404c;
    text-align: center;
    color: white;
    font-size: 11px;
    width:1%;
}

Also Added a div in Table to set the whole width (whole tab container)
http://jsfiddle.net/sijav/SSq7A/14/

edited Nov 13 '13 at 19:24

answered Nov 11 '13 at 05:16

Sijav

1,525
17
21

score 1 · Answer 5 · answered Nov 14 '13 at 11:36

I have a feeling that this is not really what you want but it does solve the following issues:

consistent padding
elements fill up the element
no calculations

HTML

<div class="tab-container">
    <ul class="tabs">
        <li>Tab1</li>
        <li>Tab 1 Space</li>
        <li>Tab 2 more Space</li>
        <li>Tab 3 even more Space</li>
        <li>Tab 4</li>
    </ul>
</div>

CSS

body {
    background: black;
}
.tab-container {
    display: block;
    width: 500px;
}
.tabs {
    display: flex;
    justify-content: space-between;
    flex-flow: row wrap;
    width: 100%;
    margin: 0;
    padding: 0;
}
.tabs > li {
    display: block;
    padding: 5px;
    background: #40404c;
    text-align: center;
    white-space: nowrap;
    color: white;
    font-size: 11px;
}

Here's the fiddle.

The solution is based on the assumption that elements can have space in between them as you didn't mention a condition like this.

With this solution, I present an issue to you - browser support for flexbox.

Information on flexbox

You can read up on flexbox from:

Idra · Answer 6 · 2013-11-15T16:31:16.013

This is basically not possible, the best you can you with CSS alone is a set up where you can add in X ammount of tabs, but must calculate the width of the tabs by hand, in order to fill the container, for example with 4 tabs you would do something like this (note how the .Tab class has a width of 25% i.e. 100/4):

                <div id="TabsContainer">
                    <div class="Tab">
                        <div class="TabContainer">Tab 1</div>
                    </div>
                    <div class="Tab">
                        <div class="TabContainer">Tab 2</div>
                    </div>
                    <div class="Tab">
                        <div class="TabContainer">Tab 3</div>
                    </div>
                    <div class="Tab">
                        <div class="TabContainer">Tab 4</div>
                    </div>
                </div>

And the CSS would be:

#TabsContainer {
    font-size: 0;
    white-space: nowrap;
}
.Tab {
    display: inline-block;
    *zoom: 1;
    *display: inline;

    width: 25%;
}
.TabContainer {
    background: #f00;
    font-size: 12px;
    border-left: 1px solid #000;
    padding: 10px;
}

The real issue comes with the second point were you require the tabs to equaly fill in the container width, if you check out the W3C recomendation for the width property you'll see that there is no value like "fill"

http://www.w3.org/TR/CSS2/visudet.html#the-width-property

Basically you need to aider set a percentage width based on the conatainer element or a set width, no real alternatives (auto really does not do what you want, it's simply the default value, and as you know DIVs do not act like that by default).

If you really need that type of behaviour, then you should be thinking of using tables, because tables can keep to the container width and then you can add in a X ammount of cells you'll get exactly what you need, but at least for now, with DIVs it's impossible using CSS alone.

score 0 · Answer 7 · answered Nov 17 '13 at 13:05

You could use flexbox here, if you wanted to go that route.

.container {
width: 800px;
}

ul {
display: flex;
width: 100%;
}

li {
flex:auto;
}

See the full example: http://codepen.io/anon/pen/rkqtD

Eventually, though, just like the other examples you'll have to make a tradeoff between consistent padding and the ability to add infinite items.

CSS Navigation with x Number of Tabs having same padding

7 Answers7

Impossible with Pure CSS given Constraints

Information on flexbox