HTML Header Alignment

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">
                        <a href="">Link1</a>
                    </li>
                    <li class="menuitem">
                        <a href="">Link2</a>
                    </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">
        <a href="">Link2</a>
      </li>
      <li class="menuitem">
        <a href="">Link1</a>
      </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;
}