CODEWITHSUNDEEP
cssalignmentcss-float
AJM
AJM

Reputation: 655

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.

Upvotes: 6

Views: 5064

Answers (6)

mangrove
mangrove

Reputation: 51

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.

Upvotes: 0

Bazzz
Bazzz

Reputation: 26942

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

Upvotes: 13

Linens
Linens

Reputation: 7942

This should fix it

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

Upvotes: 1

thedev
thedev

Reputation: 2906

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

Upvotes: 0

Shad
Shad

Reputation: 15471

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>

Upvotes: 0

SNR
SNR

Reputation: 1249

Use padding-top for for class Date

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

Upvotes: 1

Related Questions