Search code examples
htmlcssalignmentcss-tables

DIV doesn't place at top of cell

I have a simple table like this

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <link href="Theme.css" rel="stylesheet" type="text/css" />
</head>

<body>
    <div class="Calendar">
        <div>   
            <div>
                <div>
                    <div class="headerLeft">yyyyyy</div>
                    <div class="headerRight">xxxxxx</div>
                    <div class="clear"></div>
                </div>
            </div>

            <div>
                <div>
                    <div class="headerLeft">yyyyyy</div>
                    <div class="headerRight">xxxxxx</div>
                    <div class="clear"></div>
                </div>

                <div>asfs</div>
            </div>

        </div>
    </div>
</body>
</html>

CSS

.Calendar
{
    display:table;
    width:500px;
    table-layout:fixed;
}
.Calendar > div
{
    display:table-row;
}
.Calendar > div > div
{
    display:table-cell;
    height:70px;
    border: solid 1px #e0e0e0;
}

.headerRight
{
    float:right;
}
.headerLeft
{
    float:left;
}
.clear
{
    clear: both;
}

Why is the div ("yyy xxx") in first cell not place at the top? Please let me now if I am doing something wrong or missing something which needs to be added. I tested on Firefox and Chrome.

Solution

  • You could just add vertical-align: top; to the .Calendar > div > div css. That is assuming you want all of the cells to have their content aligned to the top instead of the default middle.