CODEWITHSUNDEEP
htmlcssstyling
e11en
e11en

Reputation: 115

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

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!

Upvotes: 1

Views: 430

Answers (1)

Paulie_D
Paulie_D

Reputation: 115046

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>

Upvotes: 2

Related Questions