Search code examples
htmlcsstwitter-bootstrap-3vertical-alignment

Align text to bottom of bootstrap panel

I'd like to have some text align to the bottom of panel-content in a bootstrap panel. (I'm using bootstrap 3.3.7) However, using 

position: absolute;
bottom: 0;

aligns it to the bottom of the whole panel -- which is in the footer. I'd like it to just align to the bottom of the panel-content div. But I can't figure out why it's doing this.

Below is an image of what's going on, and then my code for both the panel divs and the styling for the 'save'. I'm trying aligning 'save' to the bottom of the panel-content div, but it enters the footer.

enter image description here

      <div class="panel panel-default">
        <div class="panel-body editdiv my-textarea" contenteditable>
          Panel content
          <p class="savemet bottom">save</p>
        </div>
        <div class="panel-footer">
          <input type="text" class="poetic" placeholder="e.g. jealousy or loss">
          <div class="idea"></div>
        </div>
      </div>

...

  .bottom {
    position: absolute;
    bottom: 0;
  }
Solution

  • From the documentation of position: absolute

    An absolutely positioned element is an element whose computed position value is absolute or fixed. The top, right, bottom, and left properties specify offsets from the edges of the element's containing block. (The containing block is the ancestor relative to which the element is positioned.).

    So you need to put position: relative to your panel-content div.