Aligning elements with vertical-align: bottom doesn't work
I know it is an humiliating and basic problem, but I can't align the navigation div (green borders) with the logo div (red borders) in the bottom of the parent div (blue borders). I tried vertical-align: bottom, but didn't work, any suggestions?
HTML:
<div id="banner">
<h1><a href="http://widerdesign.co.nr/">wider design</a></h1>
<ul id="lang">
<li><a href="index.php">English</a></li>
<li><a href="es/index.php">Español</a></li>
<li><a href="tw/index.php">中文(繁體)</a></li>
<li><a href="cn/index.php">中文(简体)</a></li>
</ul>
<ul id="nav">
<li class="home"><a href="index.html">home</a></li>
<li class="portfolio"><a href="portfolio.php">portfolio</a></li>
<li class="about"><a href="about.php">about</a></li>
<li class="contact"><a href="form.html">contact</a></li>
</ul>
</div>
CSS:
#banner {
background-color: #FBFBFB;
float: left;
padding: 10px 15px;
width: 928px; /* 720 */
border: 1px solid #E2E2E2;
}
#banner h1 {
background: url(../images/logo.png) no-repeat scroll 0 0;
display: inline; /* ie6 hack for double margin */
height: 21px;
font-size: 32px;
float: left;
text-indent: -9999px;
width: 169px;
}
#header a {
color: #999;
}
#lang {
float: right;
}
#lang li {
float: left;
margin: 0 0 0 20px;
}
#lang li a {
font-size: 10px;
}
#nav {
float: left;
list-style: none;
padding: 0 0 0 20px;
}
#nav li {
float: left;
margin: 0 30px 0 0;
}
#nav li a {
float: left;
font-开发者_如何转开发size: 16px;
outline: none;
text-decoration: none;
}
#nav li a:hover {
color: #666;
}
A simple fix would be to set the parent to position: relative and your menu to postion: absolute; bottom: 0; but it's not ideal.
I guess the best option is (since they have fixed heights), to give it a margin-top with the right amount of pixels.
Try setting the height of your navigation div equal to the height of the logo image. Then use vertical-align: bottom to put the navigation at the bottom of its containing div.
精彩评论