Align horizontally with % in CSS - css

Question

I've made a sort of diagram with temperature values and a schedule for it. Now I want to align the time-tags perfectly with the middle of my gaps between the "blocks". The first one works with position:absolute and left:(%-px/2), but the second and third example are off. How does one align these boxes?
The Fiddle is HERE.
body {
background-color: #DDD;
}
a {
cursor: pointer;
}
.block {
display: block;
height: 100%;
color: #FFF;
font-size: .75em;
float: left;
position: relative;
opacity: 1;
transition: opacity, 0.4s ease; /* hover effect transition */
border-radius: 5px;
}
.block:nth-child(n+2) {
margin-left: 0.5%;
}
.block:hover {
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 3px 10px 0 rgba(0, 0, 0, 0.19);
}
.block.cool,
.legend li:nth-of-type(1):before {
background-color: #41A6F0;
}
.block.hot,
.legend li:nth-of-type(2):before {
background-color: #E27A3F;
}
.paused.cool {
background-color: #ccc;
}
.paused.hot {
background-color: #bbb;
}
.barchart {
display: grid;
margin: 0;
grid-template-columns:
[viewport-start] minmax(0.57em, 1fr) [container-start] minmax(20em, 35em) [container-end] minmax(0.75em, 1fr) [viewport-end];
grid-auto-rows: 30px;
}
row {
padding: 5px;
grid-column: container;
grid-row: span 4;
line-height: 120px;
text-align: center;
width: 0%;
animation: expand 1.2s ease forwards;
/* see animation "expand" below */
}
timerow {
grid-column: container;
grid-row: span 1;
line-height: 14px;
text-align: center;
visibility: hidden;
animation: 1.3s blendin; /* see animation "blendin" below */
animation-fill-mode: forwards;
margin-top: -15px;
position: relative;
}
timerow a {
position: absolute;
height: 25px;
width: 44px;
font-size: 0.8em;
color: #919191;
background: #fff;
}
/*
timerow a:last-child {
float: right;
margin-right: -12px;
}
timerow a:first-child {
margin-left: -17px;
}
*/
tag {
grid-column: container;
padding-top: 8px;
font-size: 0.8em;
color: #919191;
}
/* Big-Screen Design */
#media screen and (min-width: 768px) {
.barchart {
margin-left: -4.5em;
grid-template-columns:
[viewport-start] minmax(0.5em, 1fr) [axis-start] minmax(2em, 8em) [container-start] minmax(36em, 3fr) [container-end] minmax(0.5em, 1fr) [viewport-end];
}
tag {
grid-column: axis-start/container-start;
grid-row: span 4;
line-height: 120px;
padding: 0;
text-align: center;
}
}
/* intro animation */
#keyframes expand {
from {
width: 0%;
}
to {
width: calc(100% - 12px);
}
}
#keyframes blendin {
99% {
visibility: hidden;
}
100% {
visibility: visible;
}
}
#media screen and (min-width: 768px) {
#keyframes expand {
from {
width: 0%;
}
to {
width: calc(100% - 13px);
}
}
}
row:nth-child(4) {
animation-delay: .1s;
}
row:nth-child(6) {
animation-delay: .2s;
}
<div class="barchart">
<tag>Workday</tag>
<row>
<a style="width:28.9444444444%;" class="block cool">19deg</a>
<a style="width:63.805555555%;" class="block hot">21deg</a>
<a style="width:6.25%;" class="block hot">22deg</a>
</row>
<timerow>
<a style="left:calc(29.1944% - 22px);">07:30</a>
<a style="left:calc(93.5% - 22px);">22:30</a>
</timerow>
<tag>Weekend</tag>
<row>
<a style="width:44%;" class="block cool">16deg</a>
<a style="width:16%;" class="block paused hot">21deg</a>
<a style="width:38.5%;" class="block paused cool">18deg</a>
</row>
<timerow>
<a style="left:calc(44% - 22px);">00:00</a>
<a style="left:calc(60.75% - 22px);">00:00</a>
</timerow>
</div>
timerow a {
position: absolute;
height: 25px;
width: 44px;
font-size: 0.8em;
color: #919191;
background: #fff;
}
this one get's positioned too far right,
<a style="left:calc(93.5% - 22px);">22:30</a>
while this one works perfectly, where the ":" is centered in the gap:
<a style="left:calc(29.1944% - 22px);">07:30</a>
Even though I added the % numbers and factored in the 0.5% gap and subtracted the 22px for half the width of the box.

Answer 1

You also have the padding that you need to account for since position:absolute consider the padding-box to do the calculation. Add margin to timerow equal to the padding applied to row and you calculation will be correct.
You can also simplify the -22px with a translation. Also consider box-sizing:border-box; to your row element instead of decreasing the width in the animation.
body {
background-color: #DDD;
}
a {
cursor: pointer;
}
.block {
display: block;
height: 100%;
color: #FFF;
font-size: .75em;
float: left;
position: relative;
opacity: 1;
transition: opacity, 0.4s ease; /* hover effect transition */
border-radius: 5px;
}
.block:nth-child(n+2) {
margin-left: 0.5%;
}
.block:hover {
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 3px 10px 0 rgba(0, 0, 0, 0.19);
}
.block.cool,
.legend li:nth-of-type(1):before {
background-color: #41A6F0;
}
.block.hot,
.legend li:nth-of-type(2):before {
background-color: #E27A3F;
}
.paused.cool {
background-color: #ccc;
}
.paused.hot {
background-color: #bbb;
}
.barchart {
display: grid;
margin: 0;
grid-template-columns:
[viewport-start] minmax(0.57em, 1fr) [container-start] minmax(20em, 35em) [container-end] minmax(0.75em, 1fr) [viewport-end];
grid-auto-rows: 30px;
}
row {
padding: 5px;
box-sizing:border-box;
grid-column: container;
grid-row: span 4;
line-height: 120px;
text-align: center;
width: 0%;
animation: expand 1.2s ease forwards;
/* see animation "expand" below */
}
timerow {
grid-column: container;
grid-row: span 1;
line-height: 14px;
margin:0 5px;
text-align: center;
visibility: hidden;
animation: 1.3s blendin; /* see animation "blendin" below */
animation-fill-mode: forwards;
margin-top: -15px;
position: relative;
}
timerow a {
position: absolute;
height: 25px;
width: 44px;
font-size: 0.8em;
color: #919191;
background: #fff;
transform:translateX(-50%);
}
tag {
grid-column: container;
padding-top: 8px;
font-size: 0.8em;
color: #919191;
}
/* Big-Screen Design */
#media screen and (min-width: 768px) {
.barchart {
margin-left: -4.5em;
grid-template-columns:
[viewport-start] minmax(0.5em, 1fr) [axis-start] minmax(2em, 8em) [container-start] minmax(36em, 3fr) [container-end] minmax(0.5em, 1fr) [viewport-end];
}
tag {
grid-column: axis-start/container-start;
grid-row: span 4;
line-height: 120px;
padding: 0;
text-align: center;
}
}
/* intro animation */
#keyframes expand {
from {
width: 0%;
}
to {
width: 100%;
}
}
#keyframes blendin {
99% {
visibility: hidden;
}
100% {
visibility: visible;
}
}
row:nth-child(4) {
animation-delay: .1s;
}
row:nth-child(6) {
animation-delay: .2s;
}
<div class="barchart">
<tag>Workday</tag>
<row>
<a style="width:28.9444444444%;" class="block cool">19deg</a>
<a style="width:63.805555555%;" class="block hot">21deg</a>
<a style="width:6.25%;" class="block hot">22deg</a>
</row>
<timerow>
<a style="left:calc((28.9444444444 + 0.5/2)*1%);">07:30</a>
<a style="left:calc((28.9444444444 + 63.805555555 + 0.5 + 0.5/2)*1%);">22:30</a>
</timerow>
<tag>Weekend</tag>
<row>
<a style="width:44%;" class="block cool">16deg</a>
<a style="width:16%;" class="block paused hot">21deg</a>
<a style="width:38.5%;" class="block paused cool">18deg</a>
</row>
<timerow>
<a style="left:calc(44% + 0.5%/2);">00:00</a>
<a style="left:calc(44% + 16% + 0.5% + 0.5%/2);">00:00</a>
</timerow>
</div>