Put Text at Bottom of Div

Put text at bottom of div

Wrap the text in a span or similar and use the following CSS:

.your-div {
    position: relative;
}

.your-div span {
    position: absolute;
    bottom: 0;
    right: 0;
}

How to align content of a div to the bottom

Relative+absolute positioning is your best bet:

#header {
  position: relative;
  min-height: 150px;
}

#header-content {
  position: absolute;
  bottom: 0;
  left: 0;
}

#header, #header * {
  background: rgba(40, 40, 100, 0.25);
}

<div id="header">
  <h1>Title</h1>
  <div id="header-content">And in the last place, where this might not be the case, they would be of long standing, would have taken deep root, and would not easily be extirpated. The scheme of revising the constitution, in order to correct recent breaches of it, as well as for other purposes, has been actually tried in one of the States.</div>
</div>

Align text to the bottom of a div

Flex Solution

It is perfectly fine if you want to go with the display: table-cell solution. But instead of hacking it out, we have a better way to accomplish the same using display: flex;. flex is something which has a decent support.

.wrap {  height: 200px;  width: 200px;  border: 1px solid #aaa;  margin: 10px;  display: flex;}
.wrap span {  align-self: flex-end;}

<div class="wrap">  <span>Align me to the bottom</span></div>

CSS Align text at bottom of div

The main thing here is to understand what you're dealing with:

• what you're asking for is for the baseline of the font to be aligned with the bottom of the parent container,
• what you need to realize is that (in your image), the text in the div is positioned correctly

You should be able to achieve what you need by tweaking font-size and line-height and using position: absolute; or position: relative;.

font-size

Your image shows the text is either at or almost at the bottom of the parent div. The reason it's not is that the font-size of an element includes both the ascenders and descenders. You can see this by changing the text to something like "Apropos". You'll then see that the extra bit of space is for the tails of letters like g, j, p, q, and y.

line-height

The other thing that is probably going on is that the line-height for the text is some value greater than 1. You can check this by inspecting the element and finding out of the height (minus padding, borders, and margins) is still greater than the font-size.

You can set the value line-height: 1; to force the lines of text to be exactly the same height as the font-size declaration specifies, but beware that this will cause words to 'collide' when there's more than one line of text.

Mobile -vs- desktop

This leaves the matter of the difference between desktop and mobile. With a thorough understanding of font-size and line-height, you should be able to:

• reliably position the text so that the bottom of the text element aligns with the bottom edge of the parent element, and
• use position: absolute; or position: relative; to move the element into the precise position you need

This is what you've already been doing. But if it doesn't work across devices, then what is probably happening is that your font-size is different across the different devices. There's more than one reason why this might be true. For example:

• your mobile device may have a different base font size than the desktop browser; since the text you're working with is sized in ems, this could be a factor (you've done it right by using ems for the positioning too, but it's possible if a pixel font size at or near the root is different per device that something in the cascade winds up different)
• your CSS framework--if any--may adjust font sizes for small screens

I think it's likely that you can solve the problem with some combination of media queries and pixel sizes.

I would try something like the following, and if it doesn't work, then start writing media queries to account for the situations where the size/position is out of the acceptable range (note that if this is being caused by a CSS framework, you should be able to find the media queries it's using and use them yourself):

.slide-title {
  /* Substitute your own pixel sizes here */
  bottom: -3px
  font-size: 16px;
  line-height: 1;
  position: absolute;
}

Pixel sizes aren't inherently bad, and since virtually everything now allows text to scale, there's usually no reason not to use them if they make things simpler. That said, if you do have a compelling case to use ems, try with pixels first and convert to ems once you've got it working. If it worked in pixels but not in ems, then you'll need to inspect the cascade to see what's different and why.

Text to Bottom of Div

Three possible solutions, although each has its own caveats.

jsFiddle demo

The first solution relies on line-height: 220px; vertical-align: bottom; to align the text with the bottom of the DIV. The second solution creates a :before psuedo-element that pushes the text to the bottom of the DIV (this requires no additional markup). Both solutions will fail in IE7 or earlier, and both will have issues if:

• The font size changes
• The text wraps to a second line
• The size of the containing element changes

The third solution relies on the display: box; property, which is a CSS property that is being phased out (more details at Quick Hits With the Flexible Box Model). This solution is only supported by Chrome since v4, Firefox since v2, and IE10 beta. However, a new Flexbox standard has been standardized, but browser support is minimal. This solution could be considered "too new" to be used effectively (html5please.com/#flexbox).

Generally speaking, you should consider a new wrapping element around your text which will allow for position: absolute; bottom: 0; to cozy the element to the bottom of the parent element. This has the benefit of growing the child element upwards as the font size or text length increases, and is agnostic to the parent container's dimensions. Depending on how mission critical your positioning is to your layout, you could add this new element using Javascript. This probably isn't ideal given the question you've posed, but browser support isn't less than ideal for the more wacky CSS solutions I've listed above :-p

How to align content of a div to the bottom with css?

I did it using position property. Hope this helps you.. thanks

.bbb{    text-align: center;    /* bottom: 20px; */    position: absolute;    bottom: 0;    left: 0;    right: 0;}.text-wi{border-top:2px dashed #13aff2; padding: 5px 0 0 20px;}
.haha{ padding:5px}.widget-host {  display: grid;  grid-template-columns:auto auto;  grid-gap: 20px;}
.widget-host > div.host-woovn {border: 1px solid #e9e9e9; padding: 0 5px 0 5px;  position: relative;}.button{    background-color: #669900;    text-align: center;    color: #fff;    cursor: pointer;    font-weight: bold;    font-size: 14px;    padding: 8px 15px;    display: inline-block;    margin-bottom: 10px;    height: initial;    border-radius: 4px;}

<div class="widget-host"><div class="host-woovn">AAAAAAAAAAAAAAAAA<div class="text-wi"> – A<br>– B<br>– C<br>– D<br>– C</div> <div class="bbb"> <a href="/" target="_blank" class="button">AAAAA</a></div></div><div class="host-woovn"> BBBBBBB<div class="text-wi">– A<br>– B<br>– C<br>– D<br>– E<br>– B<br>– C<br>– F</div><div class="bbb"><a href="/" target="_blank" class="button">BBBB</a></div> </div></div>

Align text baseline to bottom of div

Add a ::before pseudo element with 100% height and display: inline-block; and use it to vertically align the <span> to the baseline:

div {  height: 80px;  width: 300px;  background: #ff5;  position: relative;}
div::before {  display: inline-block;  height: 100%;  content: '';}
span {  font-size: 30px;  vertical-align: baseline;}

<div>  <span>TEST gjp ABC</span></div>

How can I position my div at the bottom of its container?

The flexbox approach!

In supported browsers, you can use the following:

Example Here

.parent {
  display: flex;
  flex-direction: column;
}
.child {
  margin-top: auto;
}

.parent {  height: 100px;  border: 5px solid #000;  display: flex;  flex-direction: column;}.child {  height: 40px;  width: 100%;  background: #f00;  margin-top: auto;}

<div class="parent">  <div class="child">Align to the bottom</div></div>

How to align text to bottom of div without a fixed height

Erase the floats, use display: inline-block instead, put the three elements in a wrapper, assign vertical-align: bottom to that and make sure not to leave spaces or linebreaks between those three elements (which otherwise results in unwanted whitespace, which again causes the elements not to fit within their container):

<div id="wrapper" style="width: 80%; height: 100%; overflow:hidden; margin: 0 auto; float: left">  <div class="row" style="width: 100%; height: 80%; margin: 0 0 0 0; float: left; background-color: aqua;">    <div id="heading" class="row">      <p style="text-align: center;">This is a title</p>    </div>    <div class="wrap1" style="vertical-align: bottom;">      <div style="width: 15%; background-color: yellow; display: inline-block;">        <label style="vertical-align: bottom; ">Select</label>      </div><div style="width: 70%; background-color: orange; display: inline-block;">        <label style="vertical-align: bottom; ">Description</label>      </div><div style="width: 15%; background-color:green; display: inline-block;">        <label style="vertical-align: bottom; ">Number of items available for a very long title</label>      </div>    </div>  </div></div>

---

Related Topics