My inline-block elements are not lining up properly

Question

All of the elements within .track-container should line up nice and in line, each side by side, constrained by the 200px height they've been given with no weird margins or padding. Instead, you have the strangeness that occurs in the aforementioned fiddle.

What is causing .album-artwork and .track-info to get pushed halfway down the page, and how can I fix it? Also, I acknowledge that a table may be a better way of approaching this whole setup, but I want to figure out the problem from the code above so I can learn from this mistake.

.track-container {
    padding:0;
    width: 600px;
    height: 200px;
    border: 1px solid black;
    list-style-type: none;
    margin-bottom: 10px;
}

.position-data {
    overflow: none;
    display: inline-block;
    width: 12.5%;
    height: 200px;
    margin: 0;
    padding: 0;
    border: 1px solid black;
}

.current-position, .position-movement {
    height: 100px;
    width: 100%;
    margin: 0;
    padding: 0;
    border: 1px solid black;
}

.album-artwork {
    display: inline-block;
    height: 200px;
    width: 20%;
    border: 1px solid black;
}

.track-info {
    display: inline-block;
    padding-left: 10px;
    height: 200px;
    border: 1px solid black;
}

<div class="track-container">
    <div class="position-data">
        <div class="current-position">1</div>
        <div class="position-movement">2</div>
    </div>
    <div class="album-artwork">fdasfdsa</div>
    <div class="track-info">fdafdsa</div>
</div>

Here's a JSFiddle.

score 195 · Accepted Answer · edited Jun 20 '20 at 09:12

195

10.8 Line height calculations: the 'line-height' and 'vertical-align' properties

The baseline of an 'inline-block' is the baseline of its last line box in the normal flow, unless it has either no in-flow line boxes or if its 'overflow' property has a computed value other than 'visible', in which case the baseline is the bottom margin edge.

This is a common issue involving inline-block elements. In this case, the default value of the vertical-align property is baseline. If you change the value to top, it will behave as expected.

Updated Example

.position-data {
    vertical-align: top;
}

edited Jun 20 '20 at 09:12

Community

1
1

answered Oct 14 '13 at 18:10

Josh Crozier

233,099
56
391
304

2

Thank you! Have been looking for ages. My problem was inserting html into inline-block elements, which affected the vertical position. Problem only visible in Safari. – kapoko Mar 18 '16 at 17:09

score 35 · Answer 2 · answered Jun 26 '15 at 00:53

The elements inside .track-container are inline-level boxes in the same line box.

Therefore, their vertical alignment is specified by the vertical-align property:

This property affects the vertical positioning inside a line box of the boxes generated by an inline-level element.

By default, its value is baseline:

Align the baseline of the box with the baseline of the parent box. If the box does not have a baseline, align the bottom margin edge with the parent's baseline.

In this case, they all have baselines, which are calculated according to

The baseline of an 'inline-block' is the baseline of its last line box in the normal flow, unless it has either no in-flow line boxes or if its 'overflow' property has a computed value other than 'visible', in which case the baseline is the bottom margin edge.

The following image clarifies what's happening (the red line is the baseline):

enter image description here

Therefore, you can

Change the vertical alignment of the elements, e.g. to top, middle or bottom

.track-container > * {
  vertical-align: middle;
}

.track-container {
  padding: 0;
  width: 600px;
  height: 200px;
  border: 1px solid black;
  list-style-type: none;
  margin-bottom: 10px;
}
.position-data {
  overflow: none;
  display: inline-block;
  width: 12.5%;
  height: 200px;
  margin: 0;
  padding: 0;
  border: 1px solid black;
}
.current-position,
.position-movement {
  height: 100px;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 1px solid black;
}
.album-artwork {
  display: inline-block;
  height: 200px;
  width: 20%;
  border: 1px solid black;
}
.track-info {
  display: inline-block;
  padding-left: 10px;
  height: 200px;
  border: 1px solid black;
}
.track-container > * {
  vertical-align: middle;
}

<div class="track-container">
  <div class="position-data">
    <div class="current-position">1</div>
    <div class="position-movement">2</div>
  </div>
  <div class="album-artwork">fdasfdsa</div>
  <div class="track-info">fdafdsa</div>
</div>

Set the overflow of the elements to something different than visible, e.g. hidden or auto, so that their baseline will be their bottom margin edge.

.track-container > * {
  overflow: hidden;
}

.track-container {
  padding: 0;
  width: 600px;
  height: 200px;
  border: 1px solid black;
  list-style-type: none;
  margin-bottom: 10px;
}
.position-data {
  overflow: none;
  display: inline-block;
  width: 12.5%;
  height: 200px;
  margin: 0;
  padding: 0;
  border: 1px solid black;
}
.current-position,
.position-movement {
  height: 100px;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 1px solid black;
}
.album-artwork {
  display: inline-block;
  height: 200px;
  width: 20%;
  border: 1px solid black;
}
.track-info {
  display: inline-block;
  padding-left: 10px;
  height: 200px;
  border: 1px solid black;
}
.track-container > * {
  overflow: hidden;
}

<div class="track-container">
  <div class="position-data">
    <div class="current-position">1</div>
    <div class="position-movement">2</div>
  </div>
  <div class="album-artwork">fdasfdsa</div>
  <div class="track-info">fdafdsa</div>
</div>

Make sure the elements have no in-flow line box, so that their baseline will be their bottom margin edge. That is, the contents should be out of flow:

An element is called out of flow if it is floated, absolutely positioned, or is the root element. An element is called in-flow if it is not out-of-flow.

So for example, you can place the contents of the elements in a wrapper, and style it with float: left:

.track-container > * > .wrapper {
  float: left;
}

.track-container {
  padding: 0;
  width: 600px;
  height: 200px;
  border: 1px solid black;
  list-style-type: none;
  margin-bottom: 10px;
}
.position-data {
  overflow: none;
  display: inline-block;
  width: 12.5%;
  height: 200px;
  margin: 0;
  padding: 0;
  border: 1px solid black;
}
.current-position,
.position-movement {
  height: 100px;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 1px solid black;
}
.album-artwork {
  display: inline-block;
  height: 200px;
  width: 20%;
  border: 1px solid black;
}
.track-info {
  display: inline-block;
  padding-left: 10px;
  height: 200px;
  border: 1px solid black;
}
.track-container > * > .wrapper {
  float: left;
}

<div class="track-container">
  <div class="position-data">
    <div class="current-position wrapper">1</div>
    <div class="position-movement wrapper">2</div>
  </div>
  <div class="album-artwork">
    <span class="wrapper">fdasfdsa</span>
  </div>
  <div class="track-info">
    <span class="wrapper">fdafdsa</span>
  </div>
</div>

way more detailed and better explained than the accepted answer. Wonder why this hasn't been upvoted more — , Jan 18 '16 at 03:14
@user141554 Thanks :) Note that this answer is much more recent than the others, so having less upvotes is normal. — Oriol, Jan 18 '16 at 03:19

score 8 · Answer 3 · answered Oct 14 '13 at 18:11

8

You need to add vertical-align:top to those two elements:

.album-artwork, .track-info {
    vertical-align:top;
}

jsFiddle example

The default vertical alignment is baseline, but you are looking for top instead.

answered Oct 14 '13 at 18:11

j08691

204,283
31
260
272

To simplify i would do .track-container div { vertical-align: top;} – Cam Oct 14 '13 at 18:19

score 1 · Answer 4 · edited Oct 14 '13 at 18:35

1

Or you could set float:left; to 3 elements.

http://jsfiddle.net/fC2nt/

edited Oct 14 '13 at 18:35

Josh Crozier

233,099
56
391
304

answered Oct 14 '13 at 18:24

Szymon

1,281
1
20
36

That would work, but it defeats the purpose of using `inline-block` elements. – Josh Crozier Oct 14 '13 at 18:30
true, you're right. I'm not deleting this anwser, it could be lesson for someone :) – Szymon Oct 14 '13 at 18:32
1

You're right - 1+.. additionally, `overflow:hidden` might need to be added to the parent element in order to contain the floated elements. You should add a demo demonstrating it though. – Josh Crozier Oct 14 '13 at 18:32

score 1 · Answer 5 · answered Oct 14 '13 at 19:00

Make sure the line-height ratio on all the elements you're trying to align is the same also. If you're using a mix of DIV, P, H1-5, DT, DD, INPUT, BUTTON tags this will also cause irregularities in vertical alignment depending on what you've already defined elsewhere.

My inline-block elements are not lining up properly

5 Answers5

Linked

Related