Search code examples
csstwitter-bootstraptextalignmentword-wrap

CSS text wrap vertical alignment

I'm using Bootstrap and I have a row with 6 grid columns. The first column is defined like this:

<div class="hour-item col-sm-1 col-ms-1 col-sm-offset-3 col-ms-offset-3">
  <div class="hour-label" id="hour-label-1"></div>
  <div class="hour-value" id="hour-value-1"></div>
  <div class="hour-weekd" id="hour-weekd-1"></div>
</div>

The rest of the columns are pretty much the same, without the offset classes, and the inner div id numbering increments (-2, ... -6)

My objective here is to have the middle divs (hour-value-x) always aligned between them, a straight line. But the problem is that when text on the first inner div wraps to a second line, it pushes down the other two below it, and that column becomes vertically "misaligned" with the other columns.

Solution

  • This has been answered many times before on this site.

    There are several ways this can be done but the best is to use some javascript to match the heights of the different inner divs. Though the js that Wes Duff posted is good it will not cover all situations such as when a user resizes their browser. Using something like match height would be better.