CSS: 3 columns not fixed in width, middle one needs to stay centered

Question

Oke so I've searched high and low but I can't find a similar problem. I have 3 span's with text in them and I need the middle span of text to always be centered in the same spot and the left and right ones be relative to that. By clicking on the left or right span the values change.

<div class="container">
  <span class="left">A</span>
  <span class="middle">B</span>
  <span class="right">C</span>
</div>

The span's are all dynamically. The middle span is always at least one character but can be more characters. The left and right one can contain zero or more characters.

I tried using flex-box but I don't think that that will help in this situation. The problem every time is that the middle one is not in the same spot but jumps around when the left or right value is not the same amount of characters as it was before the values change.

I've included a small example of the problem.

var position = 1;

$('.left').click(function() {
  if (position == 1) {
    $('.left').text('');
    $('.middle').text('A');
    $('.right').text('B');
    position = 0;
  } else {
    reset();
  }
});

$('.right').click(function() {
  if (position == 1) {
    $('.left').text('B');
    $('.middle').text('C');
    $('.right').text('');
    position = 2;
  } else {
    reset();
  }
});

function reset() {
  position = 1;
  $('.left').text('A');
  $('.middle').text('B');
  $('.right').text('C');
}

.container {
  width: 200px;
  text-align: center;
  background-color: #eeeeee;
}

.container span {
  font-size: 2em;
}

.container span:nth-child(2) {
  font-size: 3em;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <span class="left">A</span>
  <span class="middle">B</span> <!-- This needs to stay in the same spot -->
  <span class="right">C</span>
</div>

Thanks for the help in advance!

You would need positioning to do that....and probably a change in the HTML structure. It won't be pretty. — Paulie_D, Aug 01 '16 at 13:32
Hmm.. oke, the problem I find when I'm using positioning is that you can't really do anything without a fixed width. — e11en, Aug 01 '16 at 13:34
It seems that you could resolve this by giving each container a fix width that will be wide enough to house the largest font-size. Is there any reason why you don't want to do that? — TheThirdMan, Aug 01 '16 at 13:38
@e11en Sure you can...see my answer...it's not pretty but it works. It's not particulalry responsive but, in a pinch.... — Paulie_D, Aug 01 '16 at 13:39
@TheThirdMan I've tried that but then I get into problems because they start overlapping if the content is bigger then the set width — e11en, Aug 01 '16 at 13:52
See box #71 here: http://stackoverflow.com/a/33856609/3597276 — Michael Benjamin, Aug 01 '16 at 18:43

Paulie_D · Accepted Answer · 2016-08-01T14:00:08.533

You would need to position the left and right elements and add a wrapper.

Firstly, we add an inner wrapper so that we can use absolute positioning which is relative to that inner div.

Now we set that wrapping div to inline-block and apply text-align:center to the parent to center that div.(Other centering methods exist of course).

Now we set both the left and right divs to position:absolute so their contents no longer affect the flow.

By applying right:100% to the left div it will always be completely to the right end of the wrapping div.

The converse applies to the right div which gets left:100%.

Because the positioned divs would collapse to a minimum width we need to appply white-space:nowrap so the text does not wrap inside the specific span.

.container {
  text-align: center;
  margin-bottom: 1em;
  background: #c0ffee;
}
.wrap {
  display: inline-block;
  background: pink;
  position: relative;
}
.left,
.right {
  position: absolute;
  top: 0;
  white-space: nowrap;
}
.middle {
  display: block;
}
.left {
  background: orange;
  right: 100%;
}
.right {
  background: red;
  left: 100%;
}

<div class="container">
  <div class="wrap">
    <span class="left">A</span>
    <span class="middle">B</span>
    <span class="right">C</span>
  </div>
</div>

<div class="container">
  <div class="wrap">
    <span class="left">A long long string</span>
    <span class="middle">BBBBB</span>
    <span class="right">Complex</span>
  </div>
</div>

Would you care to provide an explanation how this works? I might be tired, but this looks like magic to me right now. — TheThirdMan, Aug 01 '16 at 13:41
Thanks, that's a very interesting concept and a great explanation! Easy to understand once you see it... — TheThirdMan, Aug 01 '16 at 13:50
Thanks for the help, I'll see if I can use this in my own code. — e11en, Aug 01 '16 at 13:53
It works perfectly! Thanks! Stupid that I couldn't figure this out myself. I think I forgot to put that extra wrapper div in there. Thanks again! — e11en, Aug 01 '16 at 13:59

CSS: 3 columns not fixed in width, middle one needs to stay centered

1 Answers1