how to get 2 div's text to align along the bottom?

Question

I'm designing a contact page and would like to have 2 columns, one with a label (e.g. facebook, twitter) and one with the actual details. The thing is I want the two lines (which have text of different size) to both align along the bottom edge.

It's probably easier if I show you: http://goonbee.com/contact

At the moment, the label and details are vertically aligned along the centre. How can I make them align along the bottom?

My CSS is:

#contactbox {
    display: block;
    margin-top: 25px;
}

#contactboxlabels {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 17px;
    color: #c9c9c9;
    line-height: 42px;
    text-align: right;
    float: left;
    padding: 0;
    margin: 0;
}

#contactboxdetails {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 35px;
    color: #545454;
    line-height: 42px;
    text-align: left;
    vertical-align: bottom;
    float: left;
    padding: 0;
    margin: 0;
    margin-left: 15px;
}

My HTML:

<div id="contactbox">
    <div id="contactboxlabels">
        <span>email<br />twitter<br />facebook<br />phone</span>
    </div>

    <div id="contactboxdetails">
        <span><a href="mailto:[email protected]">[email protected]</a><br /><a href="http://twitter.com/goonbee"&gt;@goonbee&lt;/a&gt;&lt;br /><a href="http://facebook.com/goonbee"&gt;facebook.com/goonbee&lt;/a&gt;&lt;br /><a href="tel:+44000000">+44 000000</a></span>
    </div>

    <div style="clear:both"></div>
</div>

Answer 1

at the moment you have the labels in one container and the values in another. this will make it harder to work with and is also not semantic and meaningful.

put each label and value in its own container. you'll end up with 4 pairs of label/value.

give the container position:relative; and then use position:absolute; for both the label and value. as long as the bottom for both is 0 then they should both be aligned along the bottom edge.

Answer 2

<div>
    <div style="float: left; width: 75px; text-align: right; padding-right: 10px; padding-top:15px;">email</div>
    <div><a href="mailto:[email protected]">[email protected]</a></div>
</div>

or...

<div>
    <span style="vertical-align: bottom; padding-right: 10px;">email</span>
    <a href="mailto:[email protected]">[email protected]</a>
</div>

Answer 3

First, your markup is not very semantic. The keys belong with their values, they are not an independent column. This would be the most semantic, minimal markup:

<dl>
  <dt>email</dt>    <dd>[email protected]</dd>
  <dt>twitter</dt>  <dd>@goonbee</dd>
  <dt>facebook</dt> <dd>facebook.com/goonbee</dd>
  <dt>phone</dt>    <dd>+44 7825 163256</dd>
</dl>

For styling this, the only drawback is that you need to set the width of your dt "column" explicitly in order to get them to line up:

dl { font-family: Arial, Helvetica, sans-serif; }

/* column layout */
dt {
  float: left;
  clear: left;
  width: 4.25em; /* needs to be set for longest item */
  margin: 0 1em 0 0;
}

dd {
  overflow: hidden; /* creates an implicit column from remaining space */
}

You can then adjust line-height on the dt and add padding-top to keep the heights the same and match up the baselines:

/* typography */
dt {
  font-size: 17px;
  line-height: 29px; /* 42 - padding-top */
  padding-top: 13px; /* ceil( (42 - font-size) / 2 ) */
  color: #c9c9c9;
  text-align: right;
}

dd {
  font-size: 35px;
  line-height: 42px;
  color: #545454;
  text-align: left;
}

Alternatively, if you don't want to set the width of the left column and have it align based on the longest element, like a table column, then use a table! This would give you better control over the vertical-align as well. I don't think a table would be inappropriate here, especially if you mark up the left column as th headers.