Divs not aligned

Question

I have a row of divs that are not aligned. Each div is displayed inline-block, but the one that has 2 lines of text is out of line with the rest of the row.

.stopHoriz {
  display: inline-block;
  border: 1px solid black;
  width: 75px;
  height: 75px;
  text-align: center;
  font-size: .8em;
}
.stopVertical {
  margin-bottom: 3px;
  border: 1px solid black;
  width: 75px;
  height: 75px;
  text-align: center;
  font-size: .8em;
}

<div style="padding-right: 30px; vertical-align:top">
  <div class="stopHoriz">Amusement</div>
  <div class="stopHoriz">State Park</div>
  <div class="stopHoriz">Zoo</div>
  <div class="stopHoriz">History</div>
  <div class="stopHoriz">Marine Encounters</div>
  <div class="stopHoriz">Onset</div>
  <div class="stopHoriz">Museum</div>
  <div class="stopHoriz">Beaches</div>
</div>

score 1 · Answer 1 · answered Jul 28 '13 at 14:59

1

Use vertical-align:top in your .stopHoriz divs to align them.

jsFiddle

answered Jul 28 '13 at 14:59

Dolchio

469
2
12

score 1 · Answer 2 · answered Jul 28 '13 at 15:08

1

You can try the following CSS class if it seems helpful to you.

.stopHoriz
{
display: inline;
border: 1px solid #000;
font-size: .8em;
padding: 10px;
}

So that it will take up space as needed rather than you fixing the width and height.

answered Jul 28 '13 at 15:08

Venkateshwaran Selvaraj

1,745
8
30
60

score 0 · Answer 3 · answered Jul 28 '13 at 15:01

0

set the width to 100px. It has to do with the width you have set. The word 'Marine encounter' does not fit in your specified width. Apart from that you can also use 'vertical-align':top. There are many solutions. It depends on what you use.

answered Jul 28 '13 at 15:01

Swaroop Nagendra

609
2
15
25

Divs not aligned

3 Answers3