HTML Content within table cell from a table-layout has different padding & margins when the content is changed from the other cell

Question

I have a fixed table-layout div parent with two horizontal table-cell children.

On the left cell, I just simply put in some text. However, when the right cell has a tall image, the text on the left cell is pined to the bottom no matter what html padding & margin styles I put in. When the right cell has some multi-line text, the text on the left cell is placed on top.

I want the text from the left cell to stay on top all the time. Where am I missing?

html

<div class="row-post">
  <div class="col-cell col-fixed" style="margin-top: 0px;padding-top: 0px;">
    <p>1</p>
  </div>
  <div class="col-cell pl-3">
    <img src="https://i.kym-cdn.com/photos/images/facebook/001/295/524/cda.jpg" style="height:300px">
  </div>
</div>

<hr>

<div class="row-post">
  <div class="col-cell col-fixed">
    <p>1</p>
  </div>
  <div class="col-cell pl-3">
  <p>Some long text</p>
  <p>Some long text</p>
  <p>Some long text</p>
  <p>Some long text</p>
  <p>Some long text</p>
  <p>Some long text</p>
  <p>Some long text</p>
  <p>Some long text</p>
  <p>Some long text</p>
  <p>Some long text</p>
  <p>Some long text</p>
  </div>
</div>

css

.row-post {
  table-layout: fixed;
  width: 100%;
  word-break: break-all;
}
.row-post .col-cell {
  display:table-cell;
}

.row-post .col-cell img {
  max-width: 100%;
}

.col-fixed {
  width: 26px;
}

js fiddle if you want to play around

https://jsfiddle.net/f1zr6o93/

js fiddle snip

score 1 · Accepted Answer · answered Sep 24 '19 at 02:58

1

For table render types, you can use:

vertical-align: top;

on any "table cell".

Edited fiddle

For reference, there's a fuller explanation of when vertical align applies in this other SO article.

answered Sep 24 '19 at 02:58

Arty-chan

2,572
1
19
25

HTML Content within table cell from a table-layout has different padding & margins when the content is changed from the other cell

1 Answers1