Align position absolute element content to bottom with only one element

Question

I have a position absolute div element with text content inside without any tag, like this:

<div class="element">
    This is some content...
</div>


.element{
    position: absolute;
    top: 10px;
    left: 10px;
    right: 10px;
    bottom: 10px;
    overflow: hidden;
    padding: 10px;
    color: white;
}

I want to align that content to the bottom of the div, but without using more html tags(like this answer on a similiar question), to keep it simple.

How can I achieve this using css only?

score 3 · Accepted Answer · answered Jan 13 '16 at 16:14

3

You can achieve that with CSS flexbox like this:

.element {
  position: absolute;
  top: 10px;
  left: 10px;
  right: 10px;
  bottom: 10px;
  overflow: hidden;
  padding: 10px;
  color: red;
  background: green;
  display: flex;
  align-items: flex-end;
}

<div class="element">
  This is some content...
</div>

answered Jan 13 '16 at 16:14

Anonymous

10,002
3
23
39

Right, I completely forgot about flex. How about browser support these days? – rafaelmorais Jan 13 '16 at 16:16
1

Microsoft has already ended support for ancient IE browsers so it's is really good these days :) - http://www.winbeta.org/news/microsoft-ending-support-internet-explorer-8-9-10-next-week – Anonymous Jan 13 '16 at 16:21
1

Thanks for your answer :) appreciated – rafaelmorais Jan 13 '16 at 16:26
1

you can take a look at this github if you want more compatibility https://github.com/10up/flexibility :) – kevpoccs Jan 13 '16 at 16:27

Align position absolute element content to bottom with only one element

1 Answers1