Olegs Jasjko Olegs Jasjko - 1 month ago 8
CSS Question

How to prevent last element from moving?

Probably a stupid question, but because css is not my best side, I can't figure this out.
I got a second construction:

<div>
<span class="span-chb">
<input type="checkbox" id="special-chb" name="special-exist">
<label for="special-chb">Special exist, bla bla bla...</label>
<span class="tooltip">
<span>tooltip-text</span>
</span>
</span>
</div>


They are placed in line:

.span-chb {
height: 22px;
display:inline-block
}


My issue is when div is resized (its ok, it must change sizes in case of page size changes) tooltip span are jumping to new line. If I make div even smaller, label text are moving, but element itself stays on place.

What I'm trying to achieve, is to not move tooltip or input anywhere, but still allow for label text to move to new line. The closest I got to wanted result is adding
white-space: nowrap;
to
span-chb
but this prevent label text from jumping (basicaly its width stops to change size). Adding
white-space: normal;
to label adds issue when tooltip span placement ends up on the last label line.

What can I do to fix this issue?

Answer

I believe display:table may help fix this.

Try using the following CSS:

.span-chb {
  height: 22px;
  display: table;
}
.span-chb * {
  display: table-cell;
  vertical-align: middle;
}
.tooltip {
  white-space: nowrap;
}