How do I get text to stay in the upper-left corner of a td ALWAYS?

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;
}

Solution

vertical-align:top will do the trick.

Comments

[dotnetN00b]

In the div or the span... or both?

[Belladonna]

How does text-align:center; put it to the left?

[srini]

i miss understanding your question ? i am not clear your question tell me your problem shortly

[Belladonna]

@dotnetN00b asked how to put the text to the top left of the table cell. I was wondering how aligning the text to the center would accomplish that.