Q:

Is it possible to vertically align a div which is set to float on the right?

Given the following HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html dir="ltr" lang="en" xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Midweek Meeting Schedule</title>
<style type="text/css">
/* Column widths */
.columnTime {
    width: 7%;
}

.columnTheme1Class {
    width: 76%;
}

.columnName {
    width: 17%;
}

table {
    border-collapse: collapse;
    table-layout: fixed;
    width: 100%;
}

table th, td {
    /* Comment out the following line if you do not want borders */
    border: 1px #d3d3d3 solid;
    /* This is the default font for all cells */
    font-family: Calibri;
}

table tbody tr:hover td {
    color: #000;
    background: #efefef;
}

body{
    width:100%;
    margin-left: 0;
    margin-right: 0;
    background: #666;
}

.containerPage {
    min-width: 210mm;
    max-width: 210mm;
    padding-left: 2mm;
    padding-right: 2mm;
    margin-left: auto;
    margin-right: auto;
    background: #FFF;
}

.containerMeeting {
    margin-bottom: 5mm;
}

.cellTime {
    padding-left: 3mm;
    padding-right: 5mm;
    font-size: 9pt;
    font-weight: 700;
    color: gray;
}

.cellName {
    font-size: 10pt;
    font-weight: normal;
}

.floatRight {
    color: gray;
    padding-top: 1mm;
    padding-bottom: 1mm;
    padding-right: 2mm;
    float: right;
    text-align: right;
    font-size: 8pt;
    font-weight: 700;
    text-transform: none;
}

.tableAYFM {
    margin-bottom: 2mm;
}

.textAYFM {
    padding-left: 1mm;
    padding-top: 1mm;
    padding-bottom: 1mm;
    color: #fff;
    background-color: #c18626;
    width: 90mm;
    font-size: 10pt;
    font-weight: 700;
}

.bulletAYFM {
    padding-top: 1mm;
    padding-bottom: 1mm;
    padding-right: 1mm;
    color: #c18626;
    font-size: 14pt;
    font-weight: normal;
}

.cellClass {
    font-size: 8pt;
    font-weight: 700;
    vertical-align: bottom;
    color: gray;
}

.textDuration {
    padding-left: 1mm;
    font-family: Calibri;
    font-size: 9pt;
    font-weight: normal;
}

.textTheme {
    font-size: 11pt;
    font-weight: normal;
}

@media print {
    body{
        background: #FFF;
    }

    .containerPage, .containerMeeting, .tableAYFM {
        width: 99%;
        min-width: 99%;
        max-width: 99%;
        padding-left: 0;
        padding-right: 0;
        margin-left:auto;
        margin-right:auto;
    }

}</style>
</head>

<body>

<div class="containerPage">
    <div class="containerMeeting">
        <table class="tableAYFM">
            <colgroup>
                <col class="columnTime" />
                <col class="columnTheme1Class" />
                <col class="columnName" />
            </colgroup>
            <tr>
                <td class="cellTime">19:49</td>
                <td>
                <div class="floatRight">
                    Student:<br />
                    Assistant:</div>
                <span class="bulletAYFM">•</span> <span class="textTheme">Initial 
                Call</span> <span class="textDuration">(2 min. or less) 
                <span lang="en-gb">THIS IS EXTRA TEXT.<br />
                I FORCE IT TO HAVE 3 LINES.<br />
                HERE IS THE REST.</span></span></td>
                <td class="cellName">Name 1<br />
                Name 2</td>
            </tr>
            </table>
    </div>
</div>

</body>

</html>

This is what it looks like (area in question highlighted in yellow):

Is it possible to get that div to align vertically, whatever amount of text there is to the left of it? So that it is better aligned with the adjacent cell?
Thank you.

A:

You could add a column for the "position titles":

/* Column widths */
.columnTime {
    width: 7%;
}

.columnTheme1Class {
    width: 65%;
}

.columnName {
    width: 17%;
}

table {
    border-collapse: collapse;
    table-layout: fixed;
    width: 100%;
}

table th, td {
    /* Comment out the following line if you do not want borders */
    border: 1px #d3d3d3 solid;
    /* This is the default font for all cells */
    font-family: Calibri;
}

table tbody tr:hover td {
    color: #000;
    background: #efefef;
}

body{
    width:100%;
    margin-left: 0;
    margin-right: 0;
    background: #666;
}

.containerPage {
    min-width: 210mm;
    max-width: 210mm;
    padding-left: 2mm;
    padding-right: 2mm;
    margin-left: auto;
    margin-right: auto;
    background: #FFF;
}

.containerMeeting {
    margin-bottom: 5mm;
}

.cellTime {
    padding-left: 3mm;
    padding-right: 5mm;
    font-size: 9pt;
    font-weight: 700;
    color: gray;
}

.cellContent {
    border-right: none;
}

.cellPosition {
    padding-right: 5px;
    color: gray;
    text-align: right;
    border-left: none;
}
.cellPosition, .cellName {
    font-size: 10pt;
    font-weight: normal;
}

.tableAYFM {
    margin-bottom: 2mm;
}

.textAYFM {
    padding-left: 1mm;
    padding-top: 1mm;
    padding-bottom: 1mm;
    color: #fff;
    background-color: #c18626;
    width: 90mm;
    font-size: 10pt;
    font-weight: 700;
}

.bulletAYFM {
    padding-top: 1mm;
    padding-bottom: 1mm;
    padding-right: 1mm;
    color: #c18626;
    font-size: 14pt;
    font-weight: normal;
}

.cellClass {
    font-size: 8pt;
    font-weight: 700;
    vertical-align: bottom;
    color: gray;
}


.textDuration {
    padding-left: 1mm;
    font-family: Calibri;
    font-size: 9pt;
    font-weight: normal;
}

.textTheme {
    font-size: 11pt;
    font-weight: normal;
}

@media print {
    body{
        background: #FFF;
    }

    .containerPage, .containerMeeting, .tableAYFM {
        width: 99%;
        min-width: 99%;
        max-width: 99%;
        padding-left: 0;
        padding-right: 0;
        margin-left:auto;
        margin-right:auto;
    }

}
<body>
<div class="containerPage">
    <div class="containerMeeting">
        <table class="tableAYFM">
            <colgroup>
                <col class="columnTime" />
                <col class="columnTheme1Class" />
                <col class="columnX" />
                <col class="columnName" />
            </colgroup>
            <tr>
                <td class="cellTime">19:49</td>
                <td class="cellContent">
                  <span class="bulletAYFM">•</span> <span class="textTheme">Initial 
                  Call</span> <span class="textDuration">(2 min. or less) 
                  <span lang="en-gb">THIS IS EXTRA TEXT.<br />
                  I FORCE IT TO HAVE 3 LINES.<br />
                  HERE IS THE REST.</span></span>
                </td>
                <td class="cellPosition">
                    Student:<br />
                    Assistant:
                </td>
                <td class="cellName">
                  Name 1<br />
                  Name 2
                </td>
            </tr>
        </table>
    </div>
</div>
</body>

