How to align floated elements such that their bottoms match
- by AJM
I'm writing a web page where I show a title and a date over some text.
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:
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.
