Way to position element at bottom of floating div?

Question

I have a parent div that floats and has a fluid height and width, as part of Foundation's grid layout. With that parent div I have 2 child divs.

I want the content in both child divs to be center aligned and one div to appear at the top of the container, the other at the very bottom of the parent div.

HTML:

<div class="row">
    <div class="small-9 columns">
      Dynamic amount of content
    </div>
    <div class="small-3 columns">
      <div class="top">
        top div with centered text
      </div>
      <div class="bottom">
        bottom div with centered text
      </div>
    </div>
</div>

Eg: https://jsfiddle.net/3s0rq04c/11/

I have tried using flex, as below, with no luck:

.container{
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.top {
  align-self: flex-start;
}
.bottom {
  align-self: flex-end;
}

I have also tried using position: absolute; eg:

.container {
      text-align: center;
      position: relative;
    }
    .bottom {
      position: absolute;
      margin-bottom: 5px;
    }

This almost works, but the text in the bottom is no longer center aligned.

Would anyone know if this is possible?

Answer 1

If you can make the .rows flexbox, then the right column height will grow to match the height of the parent, and you can use justify-content: space-between; to separate the .top and .bottom on the top/bottom of .container

.row {
  display: flex;
}
.columns {
  border: 1px solid #ccc;
}
.container{
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.1/css/foundation.min.css" rel="stylesheet"/>
<div class="row">
    <div class="small-9 columns">
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
    </div>
    <div class="small-3 columns container">
      <div class="top">
        top
      </div>
      <div class="bottom">
        bottom
      </div>
    </div>
</div>

<div class="row">
    <div class="small-9 columns">
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
    </div>
    <div class="small-3 columns container">
      <div class="top">
        top
      </div>
      <div class="bottom">
        bottom
      </div>
    </div>
</div>

Answer 2

Not enough rep to comment... but,

Text align center.

.bottom {
  text-align: center;
  bottom: 0;
  align-self: flex-end;
}

I may not be understanding your question thoroughly so I apologize if that's the case.

Answer 3

You're on the right track with position:absolute. If you know that your small-9 column is going to always be bigger than 2 lines of your abs-children column this solution should work. Otherwise, you may want to add a min-height equal to two lines of text to the css.

This solution adds position:relative to the .row, allowing us to absolutely position the small-3 column to its top and bottom, that are created by the height of the text inside the small-9 column. The .top and .bottom elements are then position:absoluteed within that column.

.row {
  position: relative;
}

.columns {
  border: 1px solid #ccc;
}

.abs-children {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  float: none;
  text-align: center;
}

.abs-children .top {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}

.abs-children .bottom {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.1/css/foundation.min.css" rel="stylesheet" />
<div class="row">
  <div class="small-9 columns">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. text
    ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
  </div>
  <div class="small-3 columns abs-children">
    <div class="top">
      top
    </div>
    <div class="bottom">
      bottom
    </div>
  </div>
</div>