html text height,HTML & CSS: manipulating font/text height?

Rob has 4 sections that sit side by side (you may have to bump up width of jsfiddle window). His prob is that he wants his sections to line up along the bottom, but is having issue because the varying text sizes between his body font and header fonts.

Many of the css grid frameworks try to address these type of issues: normalizing the heights of text and headers so that all lines fall on an imaginary grid of baselines.

To be honest, I would just give the sections a static height and leave some fuzzy space at the bottom for margin of error.

section { height: 370px; position:relative; }

section .button { position:absolute; bottom:0; right:0; }

Edit:

If you're looking for a dynamic section height, you'll have to leverage javascript magic. JQuery:

section { position:relative; padding-bottom:50px; }

section .button { position:absolute; bottom:0; right:0; }

var max_height = 0;

$('section').each(function() {

max_height = Math.max(max_height, $(this).height());

}).height(max_height);