Question

If the text in the second div/span is long enough then the first div/span stays in the upper corner. But if there’s nothing in the second div/span, then the first div/span sits in the middle of the td.

I am using IE 8.

HTML Snippet for Calendar

<table id="calendar">
    <thead>
        <tr><th>April</th></tr>
        <tr>
            <th>Sun</th>
            <th>Mon</th>
            <th>Tues</th>
            <th>Wed</th>
            <th>Thur</th>
            <th>Fri</th>
            <th>Sat</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                <div>
                    <span>1</span>
                </div>
                <div>
                    <span></span>
                </div>
            </td>
            <td>
                <div>
                    <span>2</span>
                </div>
                <div>
                    <span></span>
                </div>
            </td>
            <td>
                <div>
                    <span>3</span>
                </div>
                <div>
                    <span></span>
                </div>
            </td>
            <td>
                <div>
                    <span>4</span>
                </div>
                <div>
                    <span></span>
                </div>
            </td>
            <td>
                <div>
                    <span>5</span>
                </div>
                <div>
                    <span></span>
                </div>
            </td>
            <td>
                <div>
                    <span>6</span>
                </div>
                <div>
                    <span></span>
                </div>
            </td>
            <td>
                <div>
                    <span>7</span>
                </div>
                <div>
                    <span></span>
                </div>
            </td>
        </tr>
    </tbody>
</table>

CSS for Calendar

#calendar {
    border:2px solid black;
    height:100%;
    width:100%;
}

#calendar td {
    border:2px solid black;
}

#calendar td > div:first-child {
    text-align:left; 
    left: 0; 
    top: 0;
}

#calendar td > div:first-child > span{
    text-align:left; 
    left: 0; 
    top: 0;
}

#calendar td > div + div {
    clear:both;
    text-align:center;    
    font-weight:bold;
    white-space:normal;
}

Answer 1

vertical-align:top will do the trick.