CODEWITHSUNDEEP
htmlcssalignmentcss-tables
StevenChow
StevenChow

Reputation: 155

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.

Upvotes: 0

Views: 112

Answers (3)

Nishu Tayal
Nishu Tayal

Reputation: 20820

Add vertical-align:top; to the css .Calendar > div > div

 .Calendar > div > div
{
    vertical-align:top;
    display:table-cell;
    height:70px;
    border: solid 1px #e0e0e0;
}

Here is the DEMO

Upvotes: 0

Lucas
Lucas

Reputation: 10646

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.

Upvotes: 1

Bryan
Bryan

Reputation: 6752

The solution is very inelegant, but all you have to do is reverse the order of your divs, so put the .headerRight div in FRONT of the .headerLeft div, in your HTML

Upvotes: 0

Related Questions