homepage Welcome to WebmasterWorld Guest from 54.161.192.130
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
Aligning text to the bottom of a div
brokaddr



 
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"....

 

lucy24

WebmasterWorld Senior Member lucy24 us a WebmasterWorld Top Contributor of All Time Top Contributors Of The Month



 
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.

brokaddr



 
Msg#: 4559367 posted 2:27 am on Mar 29, 2013 (gmt 0)

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

WebmasterWorld Senior Member 10+ Year Member



 
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.

brokaddr



 
Msg#: 4559367 posted 3:59 am on Mar 29, 2013 (gmt 0)

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

WebmasterWorld Senior Member lucy24 us a WebmasterWorld Top Contributor of All Time Top Contributors Of The Month



 
Msg#: 4559367 posted 4:48 am on Mar 29, 2013 (gmt 0)

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

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 4559367 posted 7:26 am on Mar 29, 2013 (gmt 0)

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.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved