amalpbepPeext
New Member
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:\[code\] <div id="header-wrap" class="full_width"> <div id="header-container" class="dc1"> <div id="header" class="thin_width rel"> <a href="http://stackoverflow.com/"><img src="http://stackoverflow.com/static/img/header.jpg" id="logo" alt="coming soon" title="coming soon"></a> <ul> <li><a href="http://stackoverflow.com/posts/list/">Link 1</a></li> <li><a href="http://stackoverflow.com/posts/create/">Link 2</a></li> <li><a href="http://stackoverflow.com/about">Link 3</a></li> </ul> </div> </div> </div>\[/code\]CSS:\[code\]#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; }?\[/code\]JSFiddle link: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.Correct way to vertically align in this circumstance