In the following code the nav tag does not behave as I thought it was supposed to (and align with the bottom of the page.)
In firebug the nav it does not appear, even after the overflow: hidden; style. However if I apply the position: absolute, bottom: 0 to ul it works.
Why is this happening? nav does not seem useful in this context.
HTML:
<!DOCTYPE HTML>
<html>
<body>
<header>
<nav>
<ul>
<li><a href="index.html">about us</a></li>
<li><a href="portfolio">porfolio</a></li>
<li><a href="contact">contact us</a></li>
</ul>
</nav>
</header>
</body>
</html>
CSS:
header {
background: url(../img/header-bg.jpg) left top no-repeat;
background-size: 100% 100%;
min-height: 400px;
position: relative;
}
/* navigation */
nav {
text-align:center;
width: 100%;
height: 100%;
overflow: hidden;
border-bottom: 2px solid #72aa21;
position: absolute;
bottom: 0;
}
nav ul {
display:inline-block;
}
nav li {
display: inline;
}
nav ul li a {
line-height: 2.6em;
padding: 0 1.5em;
display: inline-block;
position: relative;
margin: 0 .5em;
padding-left: 1.6em;
}
Your
<nav>is actually positioned at the bottom as you told it to. However, it also has 100% height, and its contents are at the top.Just remove
height: 100%and you should be fine: http://jsfiddle.net/qHvB4/