Positioning logo and nav links are not aligned
Screenshot of the problem:
The yellow block is the logo and the blue is the navigation links (I suppressed them). I would like to align the links to the bottom so that they are stuck at the top of the body content (white box). How should I do it? Here are the relevant CSS and HTML.
#header {
height: 42px;
}
#logo {
width: 253px;
height: 42px;
background-image:url(logo.png);
float: left;
}
#nav {
width: 100%;
border-bottom: 2px solid #3edff2;
vertical-align: bottom;
}
#nav ul {
list-style-type: none;
margin: 0;
padding: 0;
margin-bottom: 4px;
text-align: right;
font-size: 1.25em;
}
#nav ul li {
display: inline;
background-color: #3edff2;
padding: 5px;
}
<div id="header">
<div id="logo"><a href="/"></a></div>
<div id="nav">
<ul>
<li><a href="#">*****</a></li>
[...]
</ul>
</div>
</div>
Thanks in advance.
+1
phpscriptcoder
source
to share
3 answers
Try it. Seems to work on Firefox / Mac
#header {
height: 42px;
}
#logo {
width: 253px;
height: 42px;
background: #00ffff;
float: left;
}
#nav {
width: 100%;
border-bottom: 2px solid #3edff2;
height: 42px;
}
#nav ul {
list-style-type: none;
margin: 0;
padding-top: 18px;
margin-bottom: 4px;
text-align: right;
font-size: 1.25em;
}
#nav ul li {
display: inline;
background-color: #3edff2;
padding: 5px;
}
+1
source to share
You can use absolute positioning like this:
#header {
position: relative;
height: 42px;
}
#nav {
position: absolute;
bottom: 0px;
width: 100%;
border-bottom: 2px solid #3edff2;
height: 42px;
}
in this method you create a "nav" with absolute positioning associated with the "header" splitting.
0
source to share