Home › Forums › CSS › CSS Fixed Header Issues…KEEPS ALIGNING LEFT!!!! › Re: CSS Fixed Header Issues…KEEPS ALIGNING LEFT!!!!
January 10, 2011 at 11:24 am
#66720
gnoMember
The fixed value of the position property positions the given element relative to the browser window. It positions it after the valued specified in the top, right, bottom and left properties – they default to 0, making an element with no other styling than “position: fixed;” appear in the top left corner of the screen – and I believe that is the cause of your hairpulling.
This example should fix it for you.
The CSS:
#headerWrap {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 70px;
}
#headerWrap div {
background-color: #f00;
color: #fff;
margin: 0 auto;
width: 480px;
padding: 10px;
height: 50px;
line-height: 50px;
font-size: 32px;
}
#pageWrap {
width: 500px;
margin: 80px auto 30px auto;
}
The HTML:
THIS IS A LOGO