<div> positioning with display:table-cell

Question

I'm trying to setup a webpage using tags to separate different elements: the header/banner and the menu. Later content will be added, but for now I have enough trouble.

My div's are arranged like this:

<!-- Header showing banner and sitename -->
<div class="header">
    pagetitle
</div>

<!-- Small space for the menu -->
<div class="menu">
    <a class="menuItem" href="google.com">Google is here!</a>
    <a class="menuItem" href="somewhere.com">Work work</a>
</div>

To place them correctly I use a CSS stylesheet (I'm new to CSS which i think is my problem here...)

/* Holds the style information for the header/banner */
div.header{
    /* Size of div/header */
    width:900px;
    height:200px;

    /* Header image, main content actually */
    background-image:url('../img/header.png');


    /* Font look */
    font-family:"Lucida Console","Curier New",Monospace;
    font-size:75px;
    color:#CCCCCC;
    text-align:right;

    /* Used for putting text in buttom right corner.
     * -->NOT<-- supported in IE8 and earlier.
     */
    display:table-cell;
    vertical-align:bottom;
}

/* Holds the style information for the menu */
div.menu{
    /* Size of div/menu */
    width:900px;
    height:50px;

    /* Background for the menu */
    background-image:url('../img/menu.png');

    /* Positioning of items */
    text-align:center;
    vertical-align:middle;
    /* FIXME: Causes the menu to jump up next to the header!
     * NOT VERY GOOD BEHAVIOUR!
     */
    display:table-cell;
}

Now, the "display:table-cell" and "vertical-align" part is used to place the text correct vertically. And works fine, the text gets positioned correctly in the div's, but when more than one is present, they jump up next to each other, which they shouldn't do.

I found 2, in my mind, very dirty solutions; separating the div's with

<p></p>

or

</br>

But I really do not think that's the way... Is there a good way to solve this through the CSS sheet?

For a "live demo" of my problem, go to: **. The header is a placeholder while the real one renders. Hope you can help me.

Answer 1

Get rid of that display: table-cell. Instead use line-height to vertical align your text and margin: 0 auto; to center your div-s in the page.

div.header {
    background-image: url("../img/header.png");
    color: #CCCCCC;
    font-family: "Lucida Console","Curier New",Monospace;
    font-size: 75px;
    height: 200px;
    line-height: 350px;
    margin: 0 auto;
    text-align: right;
    width: 900px;
}

div.menu {
    background-image: url("../img/menu.png");
    height: 50px;
    line-height: 50px;
    margin: 0 auto;
    text-align: center;
    vertical-align: middle;
    width: 900px;
}