Msg#: 4559367 posted 9:44 pm on Mar 28, 2013 (gmt 0)
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"....
Msg#: 4559367 posted 11:28 pm on Mar 28, 2013 (gmt 0)
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.
Msg#: 4559367 posted 3:42 am on Mar 29, 2013 (gmt 0)
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.
Msg#: 4559367 posted 7:26 am on Mar 29, 2013 (gmt 0)
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.