Question

I have columns with display:table-cell (to make sure they are of same height.) There is some text inside of each of the column. When I add an image to one of the cells (on top of the text), text in ALL columns is pushed down, not just in the column with the image. Is there a way to prevent text in other columns from moving?

<div class = 'column'>
  <h1>Some text</h1>
</div>
<div class = 'column'>
  <img src='image.png'/>
  <h1>Some other text</h1>
</div>

.column {display:table-cell}

Answer 1

This is untested, but have you tried

.column {
  display: table-cell;
  vertical-align: top;
 }

Honestly, I’d avoid using display: table-cell. Set the height property with css instead.