Home/ Questions/Q 3960262
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-20T02:49:59+00:00

I have a very straightforward HTML page that displays content in two columns. To

  • 0

I have a very straightforward HTML page that displays content in two columns. To format the columns I’m using <div> as the outer container (display: table-row) and two inner <div> as the actual columns (display: table-cell). One of these columns has a padding at the top. The markup looks like the following – extra markup and styles omitted for clarity:

<style>
.row { display: table-row }
.cell { display: table-cell; border: 1px solid black; width: 150px }
.content { background-color: yellow }
</style>

<div class="row">
   <div class="cell">
      <div class="content">Some content; this is not padded.</div>
   </div>

    <div class="cell">
        <div class="content">More content; padded at the top.</div>
    </div>
</div>

I’m getting this:

enter image description here

But I expected this:

enter image description here

The behavior is the same whether the padding-top is applied to the cell or the content. Am I missing anything? Thanks.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You can achieve your two desired results just by using padding and margin on your div with the class content. Remember, padding will contribute to the overall width and height of an object, so that will extend the background color.

    First screen shot:

    <div class="content" style="margin-top: 10px">More content; padded at the top.</div>

    Second screen shot:

    <div class="content" style="padding-top: 10px">More content; padded at the top.</div>
    • 0