6

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.

mskfisher
  • 3,291
  • 4
  • 35
  • 48
AJM
  • 655
  • 1
  • 9
  • 19
  • 1
    Many of the answers below 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 Data div and later the font-size of the h2 changes, you'd have to change the padding. – Bazzz Mar 04 '11 at 07:47

6 Answers6

13

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;
}
Bazzz
  • 26,427
  • 12
  • 52
  • 69
  • Very clean approach. The draw back of the absolute positioning is that it allows the two elements to overlap if the horizontal width isn't managed well enough. What's your favorite way of keeping things spaced enough? – Patrick M May 10 '13 at 14:59
  • If you can add widths (percentages) to the two child elements (h2 and span) it'll remove the need to use absolute positioning and stop the overlap. – Adrian Lynch Aug 15 '16 at 13:54
1

Use padding-top for for class Date

.date
{
    float: right;
    padding-top:15px;//Distance between the red lines in second image
}
SNR
  • 1,249
  • 2
  • 20
  • 38
  • not such a good plan, what if the font-size of the `h2` changes later? You'd have to change the padding to match the new difference. – Bazzz Mar 04 '11 at 07:56
  • Then the height and width of the div should be constant. – SNR Mar 04 '11 at 08:08
1

This should fix it

.date
{
float: right;
line-height:150%;
}
LostLin
  • 7,762
  • 12
  • 51
  • 73
0

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>
Shad
  • 15,134
  • 2
  • 22
  • 34
  • 1
    we all know that, but tables for layout purposes are a no no no.. what if he needed, say, to switch positions of date and heading? with a couple of changes in css rules he would be done, using tables instead he would have to edit the code of each and every page.. tables should be used only as a last resort, when all the other solutions fail – Lucius Mar 04 '11 at 07:28
  • whoah~ if we are talking about hard coding, I 100% agree. I'm used to working with server-side/dynamically generated HTML~ where the type of editing you referenced are a couple orders of magnitude simpler. – Shad Mar 04 '11 at 07:34
  • You could use `display: table;` `display: table-row;` and `display: table-cell;` and still be semantically accurate. – Patrick James McDougle Oct 06 '13 at 02:49
0

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

Community
  • 1
  • 1
thedev
  • 2,816
  • 8
  • 34
  • 47
0

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.

mangrove
  • 31
  • 2