How to align floated elements such that their bottoms match

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.

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;
}

Use padding-top for for class Date

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

This should fix it

.date
{
float: right;
line-height:150%;
}

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>

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

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.