Letter spacing seems to make divs move

Question

I am designing a table-like cluster of divs. There are only two rows.

The "table" is built up like the following:

<div class="artist_meta_first_row">
    <div>some text</div>
    <div>some text</div>
    <div>some text</div>
    <div>some text</div>
    <div>some text</div>
</div>
<div class="artist_meta_second_row">
    <div>some text</div>
    <div>some text</div>
    <div>some text</div>
    <div>some text</div>
    <div>some text</div>
</div>

Fairly simple, right? Well here are the styles:

.artist_meta_first_row{
      text-transform: uppercase;
      padding-bottom: 40px;
      font-family: futura-pt, sans-serif;
      font-weight: 100;
      letter-spacing: 3px;
    }

      .artist_meta_first_row div{
        display: inline-block;
        min-width: 190px;
      }

.artist_meta_second_row div{
        display: inline-block;
        min-width: 190px;
        vertical-align: top;
      }

The problem I have is that the text in the divs in the first row starts a little bit more on the right than the text in the second row divs. It almost looks like there is some padding-left in the first row, but there isn't in the css code. So after a lot of trial and error I found out that it is due to the letter-spacing: 3px; in the first row - it seems to make the divs in the first row a little wider, causing the cells in the first and second row not to be aligned well, even though I specified the width.

Is there any way I can properly align the two rows without having to get rid of the letter spacing?

score 0 · Accepted Answer · answered Nov 28 '12 at 02:45

I found a way myself - since I specify the width for each div inside the two rows, I just subtracted the three pixels that the letter spacing takes away from the width of the divs in the first row. Now the beginnings of the columns throughout first and second row are correctly aligned.

This is the working code:

.artist_meta_first_row{
      text-transform: uppercase;
      padding-bottom: 40px;
      font-family: futura-pt, sans-serif;
      font-weight: 100;
      letter-spacing: 3px;
    }

      .artist_meta_first_row div{
        display: inline-block;
        min-width: 182px; /* notice 185 - 3 = 182 */
      }

      .artist_meta_second_row div{
        display: inline-block;
        min-width: 185px;
        vertical-align: top;
      }

score 0 · Answer 2 · edited May 23 '17 at 12:16

Copy-paste this exactly, should fix:

<div class="artist_meta_first_row">
    <div>some text</div><div>
    some text</div><div>
    some text</div><div>
    some text</div><div>
    some text</div>
</div>
<div class="artist_meta_second_row">
    <div>some text</div>
    <div>some text</div>
    <div>some text</div>
    <div>some text</div>
    <div>some text</div>
</div>

Demo: http://jsfiddle.net/FdRt5/

See here why: How do I remove extra margin space generated by inline blocks?

Letter spacing seems to make divs move

2 Answers2