My page consists of a navigation bar wrapped in a header element and a content frame that should be placed below it, both sharing the same width.
When I specify the header width using percentages, this is how the page appears:
However, when I define the width using ems or pixels, the layout looks like:
I'm curious why the percentage-based width is not working as expected?
HTML: (the "content" class is only used for color styling)
<header id="page-header">
<img id="logo" .../>
<nav class="content" id="page-nav">
<ul>
<li><a href="#">...</a></li>
...
</ul>
</nav>
</header>
<section class="content" id="content-container">
...
</section>
CSS: (highlighting important parts)
/*CSS reset*/
html, body, div, ul, li,
article, footer, header, nav, section {
margin: 0;
padding: 0;
border: 0;
}
article, footer, header, nav, section {
display: block;
}
/*end of CSS reset*/
/*header*/
#page-header {
margin-bottom: 3em;
height:20%; <----- this is where exactly I have a problem
}
#logo {
float:left;
display:block;
margin-left: 30px;
width: 420px;
}
#page-nav
{
margin-left:30%;
margin-right:10%;
}
#page-nav a {
float:left;
display: block;
width: 12.5%;
min-width:100px;
height: 2em;
line-height: 2em;
margin: 3em 1.04%;
vertical-align: middle;
}
#page-nav li:first-child a {
margin: 3em 1.04% 3em 0;
}
#page-nav li:last-child a {
margin: 3em 0 3em 1.04%;
}
/*content frame*/
#content-container {
margin-left: 30%;
margin-right: 10%;
margin-bottom: 5%;
padding: 2em 6em;
}