How to align floated elements such that their bottoms match - css

Question

I'm writing a web page where I show a title and a date over some text.
Blog post header http://filesmelt.com/dl/head00.png
My HTML:
<div class="post">
<h2>Post 1</h2>
<span class="date">February 28, 2011</span>
<div class="post-content">
...
</div>
</div>
My css:
.post h2
{
float: left;
}
.date
{
float: right;
}
.post-content
{
clear: both;
}
What I want to do is vertically align the title and date such that their bottoms match. Right now they don't:
Blog post header with alignment lines http://filesmelt.com/dl/head01.png
I tried wrapping the two text elements in a div, setting the div's position to relative, and using absolute positioning on the two text elements (and taking out the float declarations). That didn't work because the top margin is not preserved due to the wrapper div collapsing, even though I gave it a clearfix class.

Answer 1

Many of the other answers tell you to correct the difference by applying a static number for padding/line-height which I think is a bad solution. If you "correct" a difference with a static number and in the future the difference changes you have to change all the static numbers. Imagine you apply a padding to the Date div and later the font-size of the h2 changes, you'd have to change the padding.
Try this:
<div class="wrapper">
<h2>Post 1</h2>
<span class="date">February 28, 2011</span>
</div>
And css:
.post h2 {
display: inline-block;
}
.wrapper {
position: relative;
}
.date {
display: inline-block;
position: absolute;
right: 0;
bottom: 0;
}

Answer 2

Use padding-top for for class Date
.date
{
float: right;
padding-top:15px;//Distance between the red lines in second image
}

Answer 3

This should fix it
.date
{
float: right;
line-height:150%;
}

Answer 4

I know a lot of people would disagree, and it is a little verbose, but a <table> would solve this issue nicely:
/*CSS Somewhere*/
table {width:100%;}
td {vertical-align:bottom;}
<!--HTML-->
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="left">
<h2>Post 1</h2>
</td>
<td align="right">
<span>Feb...</span>
</td>
</tr>
</table>

Answer 5

try specifying line-height for the h2 and span
Syntax: line-height: <value>;
Possible Values:
* normal
* <length> - for example, 10px
* <number> - multiplied with the current font size
* <percentage> - for example, 130% of current font size
* inherit
for example:
h2, span.date {
line-height: 20px;
}
and you might also need to set:
span.date{
display:block;
}
here is a similar question
Vertically align floating DIVs

Answer 6

You can also accomplish this in some scenarios by putting a floated and cleared span inside the h2:
<h2>Actual header text
<span style="display: inline-block; float: right; clear: both;">Some floated content</span>
</h2>
This span will align with the bottom of the h2. Inside it, you can do whatever you want; when the page is shrunk, the floated content will go neatly under the header text.