Understanding fonts size and layout

[InfernalLV]

Hello!
I’m having some trouble figuring out how to align some text to the bottom of a div. First take a look at this [mockup](http://s4.postimage.org/5uci9ylh9/fraktal.png “mockup”)

The problem is finding a decent way to align them to the bottom. I used a relative parent, absolute child method. Before that i just set margin-top and eye balled it, but it was usually a tad off or you could see them not beeing aligned as you zoom in the page.

When i got them to the bottom i noticed, that even if i set margin and padding to 0px, there is a little bit of space that seems to be the part of the font so the text is not flush with the bottom of the div. The space changes size along with the font-size, thus it is hard to align them properly if i want my h1 to be bigger than my nav ul.

In [this fiddle example](http://jsfiddle.net/infernal/wrsAL/ “example”) you can see the
p, h1 { font-size: 2em; line-height: 1em; }

nav ul { font-size: 4em; line-height: 1em; }

So how would you guys approach this problem. I couldn’t find much on the issue. The only related thing seemed to be HTML5 canvas, but maybe i didn’t look hard enough.

While you are here, maybe you can suggest an alternative for aligning and element to the bottom of a div. I also considered the parent display: table; child display: table-cell; vertical align method.

Thank you in advance!

[Paulie_D]

You can’t align text to the bottom of an element with absolute positioning (AFAIK), howver all is not lost.

http://codepen.io/Paulie-D/pen/BowKu

Juts be aware that the table/table-cell properties can cause some unusual margin issues.

Frankly, I can’t see how the mockup and your fiddle are related.

The mockup would be very simple to replicate.

[bigd]

You could span the text with relative positioning and give it a negative margin-bottom value. It is a hack, but no HTML5 canvas needed.

[yeeyang]

you want to apply a padding to your outer containing element to that of your title and menu… once you do that, set that outer containing element to relative and you can absolute position your navigation and logo to the bottom. By applying padding to the bottom, you create the spacing you need between the bottom border and your elements.

[Codepen Example of your mockup](http://codepen.io/ahabion/pen/prgsE “”)

[Author]

Posts