CSS Fixed Header Issues…KEEPS ALIGNING LEFT!!!!

[Zander024]

Alright…Alright…Breathe…ok…

So, I’m pulling my hair out trying to figure out some css stuff with a site Im building. I’m able to do everything I need otherwise with css, and jquery/js…however for some reason setting my header div as fixed via css aint working right. It will fix, and react properly when scrolling down the page, however it keeps aligning to the left of the page.

This happens upon setting the position property to fixed, and it will recenter as it should when I remove the position property, or set the property to anything else.

Does anyone know why setting the position to fixed could be forcing it left?
Is there another property I need to specify, or clear settings for in some way?

Is there another way to get this header business done? I’ve tried other css properties, such as setting auto margins, etc…the closest I’ve gotten is if I specify a specific pixel padding on the left…however I need this thing centered with the rest of my content!

PLEASE! Help!

[gno]

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

[Josh]

gno’s code will work as well. But another solution is to wrap the fixed div with a relative div and apply position styling to the relative div.

The CSS:

#headerWrap{

position:relative;

width:600px;

height:80px;

margin:0 auto;

}



#header{

position:fixed;

width:600px;

height:80px;

background:blue;

}

The HTML:

HEADER CONTENT HERE

[Author]

Posts