sorry if this is a question that's been answered before but I've been searching and I can't find a solution that quite fits. I'm trying to get my fixed header to stay in line with the content but can't seem to get it to stay there. Whenever the window is resized the header moves left or right. The way I have it setup now is the only way I've found of getting the header to stay inline with the content at all. Otherwise it just hangs off the left side of the page.
Ideally what I'd like is to just have the header slightly bigger than the rest of the content and stay exactly in line with it no matter the window size, mainly because the logo hangs down. the live site is here: andrewillustration.com
Here is the code:
CSS
body{
background-attachment: fixed;
margin: 0px;
font: 400 16px/22px 'PT Sans Narrow', sans-serif;
color: #099;
background-color: #B4BFCD;
background-image: url(images/noisy_grid.png);
}
h1{font: 400 58px/60px 'Open Sans Condensed', sans-serif; color:#F05522; margin-left:65px;}
h2{
font: 400 18px/22px 'Open Sans Condensed', sans-serif;
color: #069;
}
h3{font: 400 14px/16px 'Open Sans Condensed', sans-serif; color:#6a6969;}
ul{margin:0px; padding:0px;}
a {
text-decoration: none;
color: #FFF;
}
a:hover {color:#099;}
a img{border:0px;}
#container{
width: 950px;
margin: 0px auto 300px auto;
Background:url(images/torn_paper_background.png) repeat-y;
overflow: auto;
padding-bottom: 100px;
}
/****************************************************/
/* HEADER */
/****************************************************/
#header{
background-color: #F05522;
width:712px;
height: 115px;
padding: 0px 43px;
position: fixed;
top: 0px;
left:62%;
margin: 0 auto 0 -475px;
}
#header #logo{
position: absolute;
float:left;
left: -157px;
}
#header #main-menu{float:right; padding-top:45px;}
#header #main-menu li{
float:left;
list-style:none;
margin-left:27px;
font: 400 16px/20px 'Open Sans Condensed', sans-serif;
color: #FFF;
}
HTML
<div id="header">
<div id="logo"><img src="images/logo-corners.png"></div>
<ul id="main-menu">
<li><a href="#work">Portfolio</a></li>
<li><a href="#about">About</a></li>
<!--<li><a href="#experience">Experience</a></li> -->
<li><a href="#connect">Contact</a></li>
</ul>
</div>
The way I'd do it would be to add a fixed-position wrapper around the header (with a width of 100%). You could then give the header a fixed width to match your content, and give it a margin of 0 auto to get it centred. Float your logo to the left, and apply the background-color to the menu ul (which is floated right), setting margins and paddings as required so that it takes up the remainder of the available space.
You'd need to add a bit of padding to your topmost content div to stop it being hidden by the menu, though.