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:[e-mail]">[e-mail]</a><br /><a href="http://twitter.com/goonbee">@goonbee</a><br /><a href="http://facebook.com/goonbee">facebook.com/goonbee</a><br /><a href="tel:[phone]">[phone]</a></span>
    </div>

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

Answer 1

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>[e-mail]</dd>
  <dt>twitter</dt>  <dd>@goonbee</dd>
  <dt>facebook</dt> <dd>facebook.com/goonbee</dd>
  <dt>phone</dt>    <dd>[phone]</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.