variable width li tabs - html

Question

How can i force the css to make the li tabs i have fill its section. The number of tabs can change to either 4 or 5.
I have tried adding the follow:
.tabs ul li {
display:table-cell;
}
.tabs ul.static
{
display:table !important;
width:750px !important;
table-layout:fixed !important;
}
But it has not worked. When there is a 5th tab the 5th goes to the line below. The current jsfiddle below does this.
How can i get the tabs to cover 100% of the width of its container whether there are 4 or 5 tabs?
http://jsfiddle.net/L7osd1oc/3/

Answer 1

your ul width 750px fix.
so you can add li fix width in % and remove ul left panding

Answer 2

Follow the table structure when you style the elements like below
.tabs{
display:table;
}
.tabs ul.static{
display:table-row;
}
.tabs ul li{
display:table-cell;
}
When you specifying width, in your case 750px, assign this to .tabs which is the table element.
See if this helps you.

Answer 3

try this demo
.tabs {
position: relative;
top: 1px;
z-index: 2;
display: block;
margin: 0 auto 0 auto;
}
.tabs a.static.selected {
width:100%;
padding:10px 0 10px 0;
background: #4096ee; /* Old browsers */
background: -moz-linear-gradient(top, #4096ee 0%, #88bff7 55%, #93c9ff 99%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4096ee), color-stop(55%,#88bff7), color-stop(99%,#93c9ff)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #4096ee 0%,#88bff7 55%,#93c9ff 99%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #4096ee 0%,#88bff7 55%,#93c9ff 99%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #4096ee 0%,#88bff7 55%,#93c9ff 99%); /* IE10+ */
background: linear-gradient(to bottom, #4096ee 0%,#88bff7 55%,#93c9ff 99%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4096ee', endColorstr='#93c9ff',GradientType=0 ); /* IE6-9 */
}
.tabs a.static {
color:#000000 !important;
float:none;
text-decoration:none;
}
.tabs ul li {
list-style: none;
margin-left: 1px;
color: #000000;
margin:0px;
padding:0px;
text-align:center;
background: #93c9ff; /* Old browsers */
background: -moz-linear-gradient(top, #93c9ff 1%, #88bff7 45%, #4096ee 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#93c9ff), color-stop(45%,#88bff7), color-stop(100%,#4096ee)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #93c9ff 1%,#88bff7 45%,#4096ee 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #93c9ff 1%,#88bff7 45%,#4096ee 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #93c9ff 1%,#88bff7 45%,#4096ee 100%); /* IE10+ */
background: linear-gradient(to bottom, #93c9ff 1%,#88bff7 45%,#4096ee 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#93c9ff', endColorstr='#4096ee',GradientType=0 ); /* IE6-9 */
display:inline-block ;
}
.tabs a:link {
color: #000000;
text-decoration:none;
}
.tab {
padding: 10px 15px;
position: relative;
display: inline-block;
list-style: none;
text-align:center;
}
.tabs.static.selected:after {
list-style: none;
padding: 10px 15px;
position: relative;
display: inline-block;
}
.tabs ul.static
{
padding:0px;
background: #93c9ff; /* Old browsers */
background: -moz-linear-gradient(top, #93c9ff 1%, #88bff7 45%, #4096ee 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#93c9ff), color-stop(45%,#88bff7), color-stop(100%,#4096ee)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #93c9ff 1%,#88bff7 45%,#4096ee 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #93c9ff 1%,#88bff7 45%,#4096ee 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #93c9ff 1%,#88bff7 45%,#4096ee 100%); /* IE10+ */
background: linear-gradient(to bottom, #93c9ff 1%,#88bff7 45%,#4096ee 100%); /* W3C */
display:table !important;
width:750px !important;
table-layout:fixed !important;
width:100%;
text-align:center;
}
.tab-content {
width:730px;
margin: auto;
background: #fff;
min-height: 200px;
border-radius: 7px;
padding:10px;
text-align:center;
}
.changeButton {
padding: 10px;
margin-left: 25px;
color: #FFFFFF;
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAACcQAAAAyCAYAAAB4IErqAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEgAACxIB0t1+/AAAABh0RVh0Q3JlYXRpb24gVGltZQAyOS8wNi8yMDExWc9aJgAAABx0RVh0U29mdHdhcmUAQWRvYmUgRmlyZXdvcmtzIENTNAay06AAAAcjSURBVHic7d0xjuVEFEDR/lANAgapA6QhJIPlsFVEDBIpywAhskkIJpl2sYqS1fedswInV+Vn+7//+PXvj/sJSPvx3Wd3XwJw2MuXn999CcBhXz87z6Huz/8ed18CcNhP7+6+AuC0l+e7rwA47au7LwA4bv/7x92XABz2+MaADnXrl78+3n0NwGE/f7/uvgTgsB9evrj7EoDDvntynkPdbx984A5137pth7xnH8RBng/ioG//8/vdlwAc9nj//u5LAA5be1sQB3XX3RcAHOc4hz6dQ5/Ooc98Dn2Oc+jTOQyw3blDns4hb8kc+nz4Cn3bozjI0zn0mc+hz3gOfTKHPp3DAPv17isATtM55NkQBwOoHPoc5wDw9jnPoU/m0KdzAAiwOQr6dA556zKhQ54Xa9Anc+hznkOf+Rz6nOfQJ3Po0zn0PWyOgj6dQ54NcTCA79uhz3EOfTKHPuc59JnPoc9xDn06hz4fxMEAOoc8G+JgAB++Qp/Koc9xDn3mc+hznkOfzKFP5zCAv1KEPp1D3ro8iYM8lUOf4xz6ZA59PoiDPplDn86hT+cwgM1R0KdzyFteoEOfF2vQtz2KgzydQ5/5HPrM59Anc+jTOQxgcxT06Rzy1uXWHfJUDn06hz4fykCfx3DQ5ziHPp1Dn85hAJujoE/nkGdDHAzgF+jQ5zyHPplDn/Mc+szn0Cdz6NM5DOBDGejTOeStyxN3yNs6hzyVwwBChzwfykCf8Rz6ZA4AAf5KEfp0Dnk2xMEAMoc+5zn0yRz6nOfQJ3Poc55D337cfQXAaQ+bo6BP55C3/AId+jyIg77t1Rrk6Rz6zOfQZz6HPplDn85hAJujoE/nkOcvU2EAxzn0Oc6hT+fQZz6HvuvJShmoc5xDnw1xMIDNUdCnc8jzl6kwwBY65Kkc+nQOfW7boU/n0Cdz6NM5DGBzFPTpHPLW5dYd8lQOff5iDfq8QIc+8zn0bRviIM98Dn0yhwGuT3dfAXCaziHPhjgYwIM46JM59Okc+szn0Gc+hz6ZQ5/OYQCbo6BP55C3Lk/cIU/l0Kdz6NM59JnPoU/l0Kdz6NM5DLBf774C4DSdQ97yy1To814N+rbQIU/n0Gc+hz7HOfTpHPpkDgPYHAV9Ooe85cUa9F1GdMhTOQC8feZz6PO4Hfqc5gAQYHMU9Okc8myIgwG8V4M+nUOfzKHPfA597tuhT+fQJ3MYwIcy0KdzyFvbrTvkeRAHfTKHPuc59JnPoc95Dn0yhz6dwwD+ShH6dA55NsTBAI5z6PNiDfpkDn3mc+gzn0Of+Rz6ZA4D2BwFfTqHvLVN6JCnc+izUQb6nOfQp3Pokzn0yRz6dA4D2BwFfTqHPBviYACZQ58Xa9Anc+gzn0OfzKHPfA59MocBbI6CPp1D3rpM6JDnxRr0yRz6dA595nPoM59Dn8yhT+cwgA9loE/nkLc8b4c+mUOf8xz6dA59Ooc+mUOf8xz6ZA4D+CtF6NM55PnLVBjAgzjokzkAvH3mc+gzn0OfzAEgwOYo6NM55K1tRIe8S+eQp3Lo296gQ57Koc/vz6HPeQ59OocBbI6CPp1Dng1xMID359DnQxnoUzn0mc+hz2079Okc+mQOA9gcBX06h7zlBTr0qRz6dA59Ooc+8zn0qRz6dA59OocBbI6CPp1Dng1xMIDOoc/7c+jTOfS5b4c+nUOf+3bokzkMsD/dfQXAaTqHvHWZ0CHPpgnoUzn06Rz6zOfQJ3Pokzn06RwGsDkK+nQOecuDOOiTOfQ5z6FP59Cnc+iTOfQ5z6FP5jDAfr37CoDTdA5563LrDnkexEHfdp5Dns6hz3wOfeZz6JM59OkcBrA5Cvp0Dnk2xMEAjnPoc5wDwNtnPoc+8zn0Oc4BIMDmKOjTOeStyxN3yNs6hzyZQ5/Ooc98Dn0yhz6dQ5/Ooe/hQxno0znk2RAHA8gc+nQOfTqHPvM59Mkc+nQOfTqHAfyVIvTpHPJsiIMBLplDnuMc+mQOfeZz6DOfQ5/jHPpkDgPYHAV9Ooe85UEc9Mkc+nQOff4CHfrM59Anc+jTOfQZz2EAm6OgT+eQ5y9TYQCdQ58PZaBP5dDnOIc+nUOfzqFP5jCAzVHQp3PIW5dbd8jz10vQ53cs0Oc4hz7zOfTZBAl95nPoM5/DAJcPZSBP55BnQxwMIHPoc55Dn8yhz3kOfTKHPuc59MkcBvBXitCnc8hbNkdBn8yhT+YA8PaZz6FP5tAncwAI8FeK0KdzyLMhDgbwfTv0Oc+hT+fQp3PoM59Dn/Mc+nQOA9gcBX06hzwb4mAAmUPf9ht0yNM59JnPoU/m0Cdz6NM5DGBzFPTpHPLW5c4d8rxAhz6VQ58X6NBnPoc+8zn07afH3ZcAHGY+hwFsjoI+nUPe2u7cIc+LNehznEOfzKHPfA595nPoc5xDn8xhAJujoE/nkPc/uudLapl/Zw4AAAAASUVORK5CYII=') !important;
background-repeat: repeat-x;
border-style:none;
}
.in-life-container
{
display: block;
margin: auto;
width:750px ;
}
<div class="in-life-container"> <img alt="Skip Navigation Links" src="/WebResource.axd?d=6iNAiGgDBpuUye_ZuQPbwXiF72lVuKy1N2-6JtQmWhRUTLP-_aBCSi-HAD2Zs-eHQCBbOkoJeU_cbrTEvN9ZQUSgy7q8g4vdB9ibfUBW5rM1&t=635418570520000000" width="0" height="0" style="border-width:0px;">
<div class="tabs" id="ContentPlaceHolder_Body_Settings_Repeater_AccountSettings_ctl00_1_Menu_MyVoiceTabMenu_1" style="float: left;">
<ul class="level1 static" tabindex="0" role="menubar" style="position: relative;"><li role="menuitem" class="static" style="position: relative; "><a class="level1 tab static" href="#" onclick="__doPostBack('ctl00$ContentPlaceHolder_Body$Settings$Repeater_AccountSettings$ctl01$ctl00$Menu_MyVoiceTabMenu','4')" tabindex="-1">SIP Details</a></li>
<li role="menuitem" class="static" style="position: relative;"><a class="level1 tab selected static" href="#" onclick="__doPostBack('ctl00$ContentPlaceHolder_Body$Settings$Repeater_AccountSettings$ctl01$ctl00$Menu_MyVoiceTabMenu','0')" tabindex="-1">Change Address</a>
</li>
<li role="menuitem" class="static" style="position: relative;"><a class="level1 tab static highlighted" href="#" onclick="__doPostBack('ctl00$ContentPlaceHolder_Body$Settings$Repeater_AccountSettings$ctl01$ctl00$Menu_MyVoiceTabMenu','1')" tabindex="-1">Change Ownership</a>
</li>
<li role="menuitem" class="static" style="position: relative;"><a class="level1 tab static" href="#" onclick="__doPostBack('ctl00$ContentPlaceHolder_Body$Settings$Repeater_AccountSettings$ctl01$ctl00$Menu_MyVoiceTabMenu','2')" tabindex="-1">Re-grade Service</a>
</li>
<li role="menuitem" class="static" style="position: relative;"><a class="level1 tab static" href="#" onclick="__doPostBack('ctl00$ContentPlaceHolder_Body$Settings$Repeater_AccountSettings$ctl01$ctl00$Menu_MyVoiceTabMenu','3')" tabindex="-1">Cease Service</a>
</li>
</ul>
</div>
<div style="clear: left;"></div><a id="ContentPlaceHolder_Body_Settings_Repeater_AccountSettings_ctl00_1_Menu_MyVoiceTabMenu_1_SkipLink"></a>
<div class="tab-content">To change the address on this account please <a id="ContentPlaceHolder_Body_Settings_Repeater_AccountSettings_ctl00_1_LinkButton_CreateTicket_1" href="javascript:__doPostBack('ctl00$ContentPlaceHolder_Body$Settings$Repeater_AccountSettings$ctl01$ctl00$LinkButton_CreateTicket','')">create a ticket here.</a>
</div>
</div>