Calc Tabs

by Keith Jeter

HTML

<div class="full_wrap">
    <div class="prev_wrap">
    	<div class="prev_lft"></div>
        <div class="prev_mid">
					<span>Test 1</span>
				</div>
        <div class="prev_rgt"></div>
    </div>
    <div class="current_wrap">
    	<div class="current_tail"></div>
        <div class="current_mid">
        	<span>Test 2</span>
        </div>
        <div class="current_rgt"></div>
    </div>
    <div class="nxt_wrap">
    	<div class="nxt_tail"></div>
        <div class="nxt_mid">
        	<span>Test 3</span>
        </div>
        <div class="nxt_rgt"></div>
    </div>
</div>

CSS

.full_wrap {
	height: 39px;
	overflow: hidden;
  mid-width: 300px;
}

.full_wrap > div {
	width: 33.3%;
	float: left;
	height: 39px;
	background: #888;
	overflow: hidden;
}

.prev_wrap { /*margin-left: 16px;*/ }

.prev_lft {
	float: left;
	width: 5px;
	height: 39px;
	background: url('mob-prog.png') no-repeat 0px 0px;
	background-color: green;
}

.prev_mid {
	float: left;
	width: calc(100% - 28px);
	height: 39px;
	background: url('mob-prog-cent.png') repeat-x 0px 0px;
}

.prev_rgt {
	float: right;
	width: 23px;
	height: 39px;
	background: url('mob-prog.png') no-repeat -6px 0px;
	background-color: red;
}

.prev_tail {
	float: left;
	width: 27px;
	height: 39px;
	background: url('mob-prog.png') no-repeat -28px 0px;
	background-color: red;
}

/* ---- */

.current_wrap { /*margin-left: -16px; margin-right: -16px;*/ }

.current_lft {
	float: left;
	width: 5px;
	height: 39px;
	background: url('mob-prog.png') no-repeat 0px -40px;
	background-color: green;
}

.current_mid {
	width: calc(100% - 50px);
	height: 39px;
	background: url('mob-prog-cent.png') repeat-x 0px -40px;
}

.current_rgt {
	float: right;
	width: 23px;
	height: 39px;
	background: url('mob-prog.png') no-repeat -6px -40px;
	background-color: red;
}

.current_tail {
	float: left;
	width: 27px;
	height: 39px;
	background: url('mob-prog.png') no-repeat -28px -40px;
  background-color: green;
}

/* ---- */

.nxt_wrap { }

.nxt_lft {
	float: left;
	width: 5px;
	height: 39px;
	background: url('mob-prog.png') no-repeat 0px -80px;
	background: green;
}

.nxt_mid {
	width: calc(100% - 50px);
	height: 39px;
	background: url('mob-prog-cent.png') repeat-x 0px -80px;
}

.nxt_rgt {
	float: right;
	width: 23px;
	height: 39px;
	background: url('mob-prog.png') no-repeat -6px -80px;
	background: red;
}

.nxt_tail {
	float: left;
	width: 27px;
	height: 39px;
	background: url('mob-prog.png') no-repeat -28px -80px;
  background: green;
}

/* -- joined classes --*/

.prev_wrap > div, .current_wrap > div, .nxt_wrap > div  { float:...