Anchoring an element.

by Espesen

HTML

<div class="char">
  <div>
    <div class="char">A1</div>
    <div class="char anchorToMiddle">D1</div>
    <div class="char anchorToRight">G1</div>
  </div>
  <div>
    <div class="char">A2</div>
    <div class="char anchorToMiddle">D2</div>
    <div class="char anchorToRight">G2</div>
  </div>
  <div>
    <div class="char">A3</div>
      <div class="char" id="charspan">
        <div class="char">B3</div>
        <div class="char">C3</div>
        <div class="char">D3</div>
        <div class="char">E3</div>
        <div class="char">F3</div>
      </div>
      <div class="char">G3</div>
      
  </div>
</div>

CSS

.char{
    display: inline-block;
}

.charspan{
    display: inline-block;
}


.anchorToRight {
    float: right;
}

.anchorToMiddle {
    text-align: center;    
}

JavaScript

var elems, i, width, span;
elems = document.getElementsByClassName("anchorToMiddle");
span = document.getElementById("charspan");
width = parseInt(window.getComputedStyle(span).width);
for (i = 0; i < elems.length; i++) {
    elems[i].style.width = width + 'px';
}