How to fill the remaining space - css

Question

I have a horizontal list with 4 items. The first item will be always 52px wide. I want the remaining three items to be equal in width and fill up the remaining space.
How can I do this?
.wa_talents .unlocks {
width: 50px !important;
background: black;
font: normal 20px/52px"Palatino Linotype", "Georgia", "Times", serif;
text-align: center;
}
.wa_talents .tier {
list-style-type: none;
border: 1px solid #221d19;
box-shadow: 0 0 4px #000;
height: 52px;
margin: 5px;
clear: left;
}
.wa_talents .tier li {
float: left;
margin-left: 5px;
width: 30%;
/* THIS FAILS HARD*/
height: 52px;
}
.talent {
background: #000;
}
.talent .cell {
padding: 4px;
margin-top: 2px;
opacity: 0.25;
}
.talent .name {
width: 125px;
text-overflow: ellipsis;
overflow: hidden;
vertical-align: middle;
line-height: 150%;
color: #ffb100;
}
.talent.active .name {
color: #fff;
}
.frame-36 {
height: 36px;
width: 36px;
}
.talent .icon-frame {
display: inline-block;
padding: 1px;
background: #000 no-repeat 1px 1px;
border-radius: 3px;
border: 1px solid #434445;
border-bottom-color: #2f3032;
border-top-color: #b1b2b4;
vertical-align: middle;
margin-right: 5px;
}
.talent.active .cell {
opacity: 1;
}
.talent.active {
background: #5b2200;
border-color: #ce5209;
box-shadow: 0 0 8px #ce5209 inset;
}
<div class="wa_talents">
<div class="tiers">
<ul class="tier">
<li class="unlocks">15</li>
<li class="talent active">
<a href="http://www.google.com" target="_blank">
<div class="cell">
<span class="icon-frame frame-36"></span>
<span class="name">Foo</span>
</div>
</a>
</li>
<li class="talent">
<a href="http://www.google.com" target="_blank">
<div class="cell">
<span class="icon-frame frame-36"></span>
<span class="name">Bar</span>
</div>
</a>
</li>
<li class="talent">
<a href="http://www.google.com" target="_blank">
<div class="cell">
<span class="icon-frame frame-36"></span>
<span class="name">Baz</span>
</div>
</a>
</li>
</ul>
<!-- HERE WILL BE SOME MORE ul#tier LISTS -->
</div>
</div>
View On CodePen

Answer 1

As mentioned before, calc isn't that widely supported. You could use overflow:hidden on an additional div containing the 3 right li's
http://codepen.io/anon/pen/WbVamx
EDIT: wrong pen

Answer 2

Pure CSS : http://codepen.io/saig/pen/EaqBZd
Using JavaScript : http://codepen.io/saig/pen/raXqEJ
var mainId = document.getElementById('main');
var calcWidth = mainId.clientWidth - 52;
var list = document.getElementsByTagName("li");
for(i=0; i < list.length; i++){
if(list[i].classList.contains("talent")){
list[i].style.width=Math.floor((calcWidth/mainId.clientWidth*100)/(list.length-1))-1+"%";
}
}

Answer 3

The simplest solution is to go with calc function. In your case it would be:
.wa_talents .tier li {
float: left;
width: calc((100% - 52px - 20px)/3);
height: 52px;
margin-left: 5px;
}
The rule is a little tricky: 52 is the width of the first li, then you also need to subtract total margin between items (20px).
Support: all major browsers and IE9+.
Demo: http://codepen.io/anon/pen/raXqZG

Answer 4

The only way to do this in pure CSS is using calc(). You can check out the documentation and compatibility table here: https://developer.mozilla.org/en-US/docs/Web/CSS/calc