CODEWITHSUNDEEP
htmlcss
a6f9
a6f9

Reputation: 23

Pin a div to the top of a column and another div to the bottom, without the two overlapping

I have a table with two columns. The right column will contain some variable amount of content. The left column will have some content that should be pinned to the top of the column and some content that should be pinned towards the bottom. When the content in the right column is larger than the left, this works out fine. But when the right column is smaller, the top and bottom content on the left end up overlapping. How can I prevent this from happening?

Actual code is in Typescript and CSS, but this is similar to what I'm doing.

.leftCol {
  padding: 20px;
  position: relative;
  vertical-align: top;
  height: 100%;
}

.rightCol {
  padding: 20px;
  position: relative;
}


.bottomDiv {
  position: absolute;
  bottom: 0;
  right: 0;
  left: 0;
}

.topDiv {
  right: 0;
}

<table>
    <tr>
        <td class="leftCol">
            <div class="topDiv">
            top<br>
            top<br>
            top<br>
            </div>
            <div class="bottomDiv">
            bottom <br>
            bottom <br>
            bottom <br>
            </div>
        </td>
        <td class="rightCol">
            <div>
            random <br>
            random <br>
            random <br>
            random <br>
            random <br>
            random <br>
            random <br>
            random <br>
            </div>
        </td>
    </tr>
</table>

Here is a Fiddle demonstrating when things work: http://jsfiddle.net/uqzk5ncy/3/

Fiddle when things break: http://jsfiddle.net/uqzk5ncy/2/

Using top: 0 for the top div doesn't work for me. I'd appreciate any feedback.

Likely a duplicate of an existing question but the only thing I could find from Google were questions on pinning one div to the bottom or top of a column.

Upvotes: 2

Views: 438

Answers (2)

Abel N
Abel N

Reputation: 11

Firstly, I would recommend not using a table for this. Use divs.

To prevent overflow you can use:

overflow: none

Then use CSS properties such as height and width to set desired sizing and then use the position property:

position: absolute

Upvotes: 0

Gerard
Gerard

Reputation: 15786

Instead of using table, I would use flexbox.

Here's an example where the right column has a lot of content.

.container {
  display: flex;
}

.leftCol,
.rightCol {
  display: flex;
  flex-wrap: wrap;
  padding: 20px;
}

.bottomDiv {
  width: 100%;
  align-self: flex-end;
}

.topDiv {
  width: 100%;
  align-self: flex-start;
}
<div class="container">
  <div class="leftCol">
    <div class="topDiv">
      top<br> top
      <br> top
      <br>
    </div>
    <div class="bottomDiv">
      bottom <br> bottom <br> bottom <br>
    </div>
  </div>
  <div class="rightCol">
    <div>
      random <br> random <br> random <br> random <br> random <br> random <br> random <br> random <br>
    </div>
  </div>
</div>

And here's an example where the right column has hardly any content.

.container {
  display: flex;
}

.leftCol,
.rightCol {
  display: flex;
  flex-wrap: wrap;
  padding: 20px;
}

.bottomDiv {
  width: 100%;
  align-self: flex-end;
}

.topDiv {
  width: 100%;
  align-self: flex-start;
}
<div class="container">
  <div class="leftCol">
    <div class="topDiv">
      top<br> top
      <br> top
      <br>
    </div>
    <div class="bottomDiv">
      bottom <br> bottom <br> bottom <br>
    </div>
  </div>
  <div class="rightCol">
    <div>
      random <br> random
    </div>
  </div>
</div>

Upvotes: 1

Related Questions