Why is this third div affecting the other two divs?

Question

I'm trying to make a div table and I'm getting annoying results.

body {
  margin: 0px 0px 0px 0px;
  padding: 0px 0px 0px 0px;
  box-sizing: border-box;
}
.table-header {
  color: white;
  text-align: center;
  margin: 0;
  padding: 0;
  background-color: #646464;
}
.table-cell {
  background-color: yellow;
}
.short-cell {
  height: 25px;
}
.col1 {
  width: 15%;
  display: inline-block;
  text-align: center;
}
.col2 {
  width: 35%;
  display: inline-block;
}
.col3 {
  width: 48%;
  display: inline-block;
}
.response {
  border-width: 2px;
  padding: 0px;
  width: 98%;
  border-width: 0;
}

<div class="table-header col1">Question #</div>
<div class="table-header col2">Question</div>
<div class="table-header col3">Response</div>
<div class="table-cell col1 short-cell">1</div>
<div class="table-cell col2 short-cell">Question goes here</div>
<div class="table-cell col3 short-cell">
</div>

JSFIDDLE

Before adding the final div in my code sample (the far bottom right cell), things look pretty good:

Without final cell

But as soon as I add the final cell, the previous two cells are moved down and I can't figure out why.

With final cell, note first two columns displacement

I'm running the latest stable Chrome (41).

What's causing this movement and how can I fix it so that the 3 table divs (and eventually more rows) are displayed in a proper row?

Not sure on the cause, but adding content (such as ` `) fixes the issue. http://jsfiddle.net/a1cqr152/1/ — dotty, Mar 09 '15 at 16:45
@isherwood The company I'm working for has a framework that they make all of their products with. That framework doesn't do tables. The divs are actually generated by the framework and all I can do is write the CSS and attach the classes. — Corey Ogburn, Mar 09 '15 at 17:01

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

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.

Therefore you need to change the vertical-align property of the .table-cell elements to something other than the default value baseline.

Updated Example

.table-cell {
    background-color: yellow;
    vertical-align: top;
}

Without changing the vertical-align property, notice that the issue is resolved when adding text to the .col3 element. (example)

Likewise, if you remove the text from all the elements, the issue is also resolved. (example)

This is because the last .col3 element was being aligned to the baseline of the last line box in the normal flow (as the spec above states).

I never would have expected this. Thanks, it works like a charm. — Corey Ogburn, Mar 09 '15 at 16:56

Why is this third div affecting the other two divs?

1 Answers1