HTML Header Alignment - html

Question

I am trying to create a header that contains an image along with links that will act as a nav menu for users to navigate.I want the layout to look something like this.
However, I cant seem to get the alignment of the nav menu right to vertically align right above the underline in the header.
<header>
<div>
<img id="headerimage" src="" />
</div>
<nav id="headernav">
<ul id="list">
<li class="menuitem">
Link1
</li>
<li class="menuitem">
Link2
</li>
</ul>
</nav>
</header>
CSS:
html, body {
height: 100%;
background-color: #cccccc;
margin: 0;
}
#header {
border-bottom: 2px solid black;
}
header {
margin: 0;
background-color: #cccccc;
}
height: 5%;
width: 100%;
}
.menuitem {
display: inline;
float: right;
vertical-align: top;
margin-right: 2%;
}
#headerimage {
width: 36px;
height: 36px;
margin-left: 3%;
vertical-align: middle;
}
How do I keep the links to the right of the page along with moving them above the border? Any help would be greatly appreciated.

Answer 1

Your CSS snippet has some typos, it probably should be:
html, body {
height: 100%;
background-color: #cccccc;
margin: 0;
}
header {
margin: 0;
background-color: #cccccc;
height: 5%;
width: 100%;
border-bottom: 2px solid black;
}
.menuitem {
display: inline;
float: right;
vertical-align: top;
margin-right: 2%;
}
#headerimage {
width: 36px;
height: 36px;
margin-left: 3%;
vertical-align: middle;
}
So you need to correct that.
Having a header that is 5% of the height of the page doesn't make a great deal of sense to me, and because the menuitem items are floated right, they don't have any block effect on the header content.
If you gave the header a fixed height that was big enough, e.g. height: 80px; then it would display as you want.
EDIT:
An alternative is to give the menuitems a relative position, then offset the top by the height of the image in the header (it's the only element with a fixed height), and apply the border to the div enclosing the header image (see http://codepen.io/raad/pen/oyncv):
HTML
<header>
<div class="imagecontainer">
<img id="headerimage" src="" />
</div>
<nav id="headernav">
<ul id="list">
<li class="menuitem">
Link2
</li>
<li class="menuitem">
Link1
</li>
</ul>
</nav>
</header>
CSS
html, body {
height: 100%;
background-color: #cccccc;
margin: 0;
}
header {
margin: 0;
background-color: #cccccc;
height: 5%;
width: 100%;
}
.imagecontainer {
border-bottom: 2px solid black;
}
.menuitem {
position: relative;
top: -36px;
display: inline;
float: right;
margin-right: 2%;
}
#headerimage {
width: 36px;
height: 36px;
margin-left: 3%;
vertical-align: middle;
}

Answer 2

Add this to your CSS:
#headernav {
float: right;
}
#headernav ul li {
display: inline;
}
This will float the nav to the right and display your list inline so each bullet is side-by-side.
JSFiddle: http://jsfiddle.net/tsukasadt/puf0ws3x/

Answer 3

Please see the following fiddle: http://jsfiddle.net/nfpzzao7/
<header>
<div class="headerimage-container">
<img id="headerimage" src="" />
</div>
<nav id="headernav">
<ul id="list">
<li class="menuitem">
Link1
</li>
<li class="menuitem">
Link2
</li>
</ul>
</nav>
</header>
html, body {
height: 100%;
background-color: #cccccc;
margin: 0;
}
#header {
border-bottom: 2px solid red;
}
header {
margin: 0;
background-color: #cccccc;
}
height: 5%;
width: 100%;
}
.menuitem {
display: inline;
float: right;
vertical-align: top;
margin-right: 2%;
}
#headerimage {
width: 36px;
height: 36px;
margin-left: 3%;
vertical-align: middle;
}
.headerimage-container {
display: inline-block;
}
#headernav {
display: inline-block;
}
#headernav li {
float: left;
margin-right: 10px;
}