Question

Aligning things vertically seems like a dark art. This is a section of my currect sites code (specifically, the header). The site is coded like this to do with the footer being docked to the bottom of the page.

HTML:

<div id="header-wrap" class="full_width">
  <div id="header-container" class="dc1">
    <div id="header" class="thin_width rel">
      <a href="/"><img src="/static/img/header.jpg" id="logo" alt="coming soon" title="coming soon"></a>
      <ul>
        <li><a href="/posts/list/">Link 1</a></li>
        <li><a href="/posts/create/">Link 2</a></li>
        <li><a href="/about">Link 3</a></li>
      </ul>
    </div>
  </div>
</div>

CSS:

#header-wrap { top: 0; left: 0; }
#header-container { height: 60px; border-bottom: 1px solid #E5E5E5; }
#header { margin: 0 auto; }
#header h1 { color: #beffbf; text-align: left; width: 290px; margin: 0; position: absolute; left: 0; top: 20px; }
#header h1 em { color: #90b874; font-size: small; display: block; }
#header ul { margin: 0; padding: 0; list-style: none; position: absolute; top: 35px; right: 0; }
#header ul li { float: left; margin-right: 5px; }
#header ul li a{ color: #90b874; font-weight: bold; font-size: 1.4em; margin-right: 5px; text-decoration: none; }
#header ul li a:hover { color: #beffbf;  }
.dc1 { background-color: #FFFFFF; }
.rel { position: relative; }
.full_width { width: 100%; }
.thin_width { width: 450px; }​

Here’s a JSFiddle Exmple

How should I go about trying to vertically align the links on the right and the logo?
I would like to try and do this without using fixed padding since it makes it a pain if I ever update the logo or link height.

So, what is the correct way to vertically align in this circumstance?

Answer 1

All you need to do is set element.style

#header ul { top:0;} and #header { position: relative;}