Aligning text to the base of it's parent

[jordan.]

Hi there,

I've got the following problem. I have an <h3> parent element with an <a> child. The <h3> has fixed height and width. I would like the child <a> to be positioned at the bottom of the parent.

The html:

<h3><a href="">This is short</a></h3>
<h3><a href="">This is a long one that should run two lines</a></h3>

The CSS:

h3 {
width: 200px;
height: 100px;
border: 1px solid red;
}
[/CODE]

What I currently see:

What I'd like to see:

And I would like to achieve it without using [i]display:table [/i]or [i]position:absolute.[/i]

Any help is much appreciated.

Thanks,

Jordan

[ashpowell]

Here you go mate

http://jsfiddle.net/fgsdj/

Basically, display:table the parent, then display:table-cell;vertical-align:bottom the child

[jordan.]

I've been trying to avoid using display:table but then that's what I keep seeing everyone say to use :/ ... I guess that's just what I'll do. Thanks.

Actually. What would be better for mobile support? display:table or position:absolute; bottom:0;

[ashpowell]

Not sure to be honest, both should work fine.. although using positions may have better support on ie6 from what I've read.

http://jsfiddle.net/fgsdj/1/

^ using positions there, tested both on my nexus 4 default browser and both work fine

P.S sorry only just read you'd like to achieve it using neither of the above, missed that part

[primexx]

display:table is perfectly fine. it's a stylistic rather than symantic declaration. what you want to avoid is using actual <table>s in the markup where the content isn't actually tabular data, but you can use CSS to tell browsers to treat things like tables for the purpose of styling all you want. all modern browsers support this, try it out on a phone to be sure but they should work just fine.