Question

I have a fairly strange behavior of <nav>:

My html is simple:

<div class="rounded screen defaultBg">
    <header>
        <img src="/img/logo-temp.png" alt="logo" width="185" height="88"/>
    </header>

    <nav>
        Nav<br/>
        Nav<br/>   <!--Placeholder-->
        Nav<br/>
        Nav<br/>
        Nav<br/>
        Nav<br/>
        Nav<br/>
        Nav<br/>
        Nav<br/>
        Nav
    </nav>

    <div id="content">
        ...
    </div>
    <footer>...</footer>
</div>

And the relevant CSS is

nav {
    display:table-cell;
    width:200px;
}

#content {
    display:table-cell;
    width:80%;
}

.rounded {
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    border-radius:5px;
}

.screen {
    padding:3px;
    display:table;
    width:1000px;
    margin:auto;
}
.screen header, .screen footer {
    display:table-row;
    text-align:center;
}

The only workaround I’ve found was specifying the .screen width in %, however, my layout will be specific to several screen sizes and thus I need an exact pixel value. Can anyone offer some insight on how this issue can be fixed please?

Answer 1

Found that for some reason the only way to work around this is by putting the header and footer outside of the div class="screen" container. Looks as intended now.