Aligning text to the bottom of a div

[brokaddr]

I have a div that has an image, with a textual link beneath it.

Is it possible to align the text to the bottom of the div? Right now, the text is glued to the side/bottom of the image.

I've tried:
text-align:bottom; and it doesn't do anything. I would prefer the image stay in it's current place (fixed to the top of the element) so aligning the entire div doesn't seem like it would help.


Here is my Div:

float:left;
text-align:center;
display:block;
margin:5px;
width:20%;
max-height:200px;

And I've tried the text-align:bottom directly in the href portion of the link:

<a style="text-align:bottom;" href"....

[lucy24]

Heh. I've been bitten by "text-align" myself a few times. It's actually a property of inline elements and refers to the text's relationship to other text in the same line. You could, for example, use it to position superscripts. Sometimes it "works" -- that is, it does what you wanted it to do -- on block-level elements. But if you look closer you'll see it's because the overall content of the div makes your html and css "think" they are dealing with an inline element.

I think the only way to get something to display at the bottom of a div is to set it to "display: table-cell". And then you have to deal with #1 older browsers* that don't recognize this property and #2 further issues involving the position of the div itself, probably requiring a second div acting purely as a container for the one you're working with.


* Details of course depend on which rule you're dealing with. But in general, do not expect MSIE <8 to behave like a normal browser.

[brokaddr]

By display:table-cell I assume you mean the faux table method?

I worked on that (extensively) last night and I couldn't get it to work.

Since it self-aligns to the bottom of the photo, there's no way to "reverse" the auto method?

Details of course depend on which rule you're dealing with. But in general, do not expect MSIE <8 to behave like a normal browser.

Oh I bet this site looks gawdy in older browsers! Is there an online emulator I could test with, without having to install them to my computer?

[rainborick]

It could be better and easier to simply use absolute positioning. It just takes a little extra care in sizing the containing <div> vertically with an appropriate height setting. Something like:

<div style="float:left; margin:5px; position:relative; top:0; left:0; width:20%; height:180px;">
<a style="position:absolute; bottom:0; left:0; display:block; text-align:center;" href="/">Link Text</a>
</div>

Obviously, you'll want to change the height:180px; setting depending on what the <div> contains beyond the <a> tag. But this should get you close.

[brokaddr]

Putting the <a style outside of the div with the image breaks the layout, is there any way to mend them together?

This is the div holding the photo:

min-height:10em;
vertical-align:middle;
height:15%;
width:25%;
float:left;
margin:10px;
text-align:center;
padding-bottom:3.5cm;
margin-top:auto;
margin-bottom:auto;

The links are inside of this div style, and I suppose that's the reason they're attached to the bottom of the photos.

Changing the height % didn't do much spread the elements out, unfortunately.

[lucy24]

It could be better and easier to simply use absolute positioning.

Can you put the term "absolute positioning" into the same sentence as "responsive" or "accessible"?

Not you specifically. "You" in the abstract.

[rainborick]

Sure.

Absolute positioning is not necessarily an impairment to either responsive design or accessibility - especially when, as in this case, we're focusing on the vertical position almost exclusively and doing so within a very confined area of the page. Of course, the position properties are as capable of using percentages as the dimension properties, so you can certainly use them in responsive design.

Design decisions often require balancing, and sometimes you have to be willing to sacrifice some degree of platform flexibility to achieve enhanced performance or appearance for your primary audience. I'd hate to think we always have to limit our designs just so our pages will squish down to smartphone dimensions without any zooming. On a good day, your stylesheet(s) will deal with platform differences and limitations anyway.