CSS Align text at bottom of div - html

Question

I'm trying to align the text 'About' on the bottom of an image. The red line indicated the position in the text I want aligned at the bottom. However, whatever I try gives inconsistent results when I try it on desktop and mobile. It currently works on my laptop, you can see it here http://theoddler.github.io/ (click the image to 'open' the slide.)
This is what the html looks like: (it's hosted at github so I'm using liquid tags)
<div class="slide_title">
<span>{{ include.title }}</span>
</div>
<div class="slide_heading clickable">
<img src="{{ include.image }}" width="100%" alt="{{ include.title }}"/>
</div>
the css:
.slide .slide_title {
font-size: 4.938em;
color: #f8f8f8;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
margin: 0;
pointer-events:none;
position: absolute;
left: 0.000em;
top: 14.188em; /*some default when no javascript is used, otherwise set in js*/
}
.slide .slide_title span {
position: absolute;
bottom: -0.24em;
white-space: nowrap;
text-shadow: 0 0 0.05em #999999;
}
The text is in a div, with css position: absolute, and I position it's div with my image (so the bottom of the div is positioned correctly at the bottom of the image, this is how it should be). However now I'm trying to get the text in the div to be positioned correctly.
All thing I tried gave inconsistent results. It would be positioned perfectly on my desktop, but then have a different offset on mobile.
What I tried (that I can remember, tried a lot):
I tried just giving the div an fixed offset in my script to position it.
I tried changing the height of the div, which move the text as I wanted.
Then I tried placed the text in a span inside the div, and moving the span by setting it's bottom. This is what it currently is, and is the closest I got to it being offset equally everywhere I tried.
I also tried setting vertical-align of the div to bottom, but the text didn't move at all.
Is there a consistent way to align text like this? So it works anywhere?
Thanks!
Note: I'm using jquery to position the div.

Answer 1

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.

Answer 2

Try doing this:
<div class='slide_wrapper'>
<div class="slide_title">
<span>{{ include.title }}</span>
</div>
<div class="slide_heading clickable">
<img src="{{ include.image }}" width="100%" alt="{{ include.title }}"/>
</div>
</div>
css:
.slide_wrapper {
position: relative;
}
.slide_title {
position: absolute;
top: 0;
left: 0;
z-index: 2;
}
.slide_heading {
position: absolute;
top: 0;
left: 0;
z-index: 1;
}
Then in jquery:
var w = $("slide_heading").width();
var h = $("slide_heading").height();
$(".slide_wrapper").css({width: w, height: h});
$(".slide_title").css({width: w, height: h, line-height: (h - 20px)});
this is untested but I'm pretty sure it should work :/
change the [b]20px[/b] to whatever number of pixels the red-line is from the bottom of the image