CODEWITHSUNDEEP
htmlcss
Bagzli
Bagzli

Reputation: 6577

Create Vertical gap in table cell element

I'm trying to figure out how can I create a vertical gap between two elements that are located in a display: table-cell element. My limitation is that this element cannot change and has to stay table-cell, however html inside the table-cell can change. Here is my attempt, but that doesn't work:

.table {
  display: table;
}

.row {
  display: table-row;
  border: 1px solid black;
}

.cell {
  display: table-cell;
  width: 50%;
}

.top {
  vertical-align: top;
}

.bottom {
  vertical-align: bottom;
}
<div class="table">
  <div class="row">
    <div class="cell first">
      <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam enim neque, interdum vitae tellus in, ullamcorper consectetur dui. Phasellus porttitor pharetra eros, tincidunt rhoncus ex lacinia non. Vestibulum cursus massa lorem, vel commodo neque rhoncus a. Quisque ac quam nisl. Quisque eu gravida justo. Duis ac pulvinar ex, vel fringilla nibh. Sed auctor rutrum augue, vel lobortis ligula sodales vel. Integer nec ex aliquet, facilisis dolor sit amet, convallis nunc. Nullam non condimentum diam, at porta tellus. Sed bibendum mollis metus ut feugiat. Donec odio ipsum, ultricies at euismod a, sodales volutpat nunc. Suspendisse fringilla egestas diam, mattis ornare nisl. Phasellus ac ipsum a tortor mattis faucibus. Morbi pulvinar egestas enim quis commodo. Sed in semper turpis. Aliquam odio nulla, hendrerit ac ipsum interdum, malesuada cursus eros.

Nam ac sem tempus, malesuada urna eu, porttitor dui. Donec at nisl mollis, maximus risus vitae, malesuada erat. Vestibulum purus libero, cursus sit amet tincidunt a, egestas in velit. Sed dapibus auctor luctus. Quisque et porta justo. Fusce sed tempor odio, quis congue libero. Vestibulum ipsum nisl, scelerisque sed lectus nec, congue dapibus nisi. Quisque sit amet dui tellus. Suspendisse eleifend faucibus metus, sit amet tristique mauris bibendum feugiat. Vestibulum nec finibus nunc. Curabitur pulvinar non libero eu pharetra. Ut eget vulputate justo. Ut feugiat tincidunt dignissim. Sed vitae pharetra quam. Cras vel commodo sapien, a gravida augue.
      </p>
    </div>
    <div class="cell">
      <div class="top">
        <p>
          This is some text that should be located to the top
        </p>
      </div>
      <div class="bottom">
        <p>
          This is some text that should be located at the bottom
        </p>
      </div>
    </div>
  </div>
</div>

https://jsfiddle.net/82y1nvot/

I thought about using display: absolute but the problem with that is that absolute won't be held in a table-row which is where I would need to set the relative on.

Upvotes: 0

Views: 74

Answers (2)

arieljuod
arieljuod

Reputation: 15848

I'have changed my mind. Instead of a grid, I've used a flexbox, it has more crossbrowser support for that thing you need.

.cell:last-child {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

Note that doing this you can't use display: table-cell. You can remove the ".row" div and use flex also on the .table div to get the same "2 columns" layout.

.table {
  display: flex;
}

.cell:last-child {
  flex: 50% 0 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

https://jsfiddle.net/0oxyL7cj/

Upvotes: 0

Kabelo2ka
Kabelo2ka

Reputation: 417

You can achieve that by using position absolute.

Add the following css:

.cell {
  display: table-cell;
  position: relative;
  width: 50%;
}

.top, .bottom {
  position: absolute;
}

.top {
  top: 0;
}

.bottom {
  bottom: 0;
}

See fiddle https://jsfiddle.net/2c7xd8ue/1/

Upvotes: 1

Related Questions