[SOLVED] How to fix the placement of a div layer

[ksduded]

I want to make a div fixed on the top of my page. All the content will be in another Div which can be scrolled down. But the fixed div always remain on the top.

 

This is what i have defined so far in css. (Layout is the main layer which has the statictopbar div nested within it). I want to make the statictopbar div as the a fixed div at the top of the page, and everything flows under it. I also need to position it at the horizontal center of the page.

 

html, body {
margin:0;
padding:0;
height:100%;
}

.layout 
{
position:relative;
margin: 0 auto;
border:solid 1px #000000;
border-bottom:0;
border-top:0;
width:762px;
min-height:100%;
}

.statictopbar
{
font-family: "Century Gothic";
font-size: 12px;
color: #999999;
background-color: #000000;
height: 114px;
border:solid 0px #000000;
width:762px;
position: absolute;
top:0;
left:0;
}

[ToonMariner]

position:fixed;

 

this don't work in IE6 so you'll need a bit of javascript to help out...

[ksduded]

position:fixed;

 

this don't work in IE6 so you'll need a bit of javascript to help out...

 

if I make it fixed, I have to provide the x and y position. y is fine as top:0; but I need to position it horizontally regardless of the resolution, so x property is dynamic. Can I define a variable for changing the x property in CSS according to the user's resolution.

[ToonMariner]

you don't need to you can either use % or make the element 100% wide or wrap one div around it - give that fixed position and 100% width and center the contents using margin: 0 auto;

[ksduded]

yeah i used this

 

#statictopbar
{
font-family: "Century Gothic";
font-size: 12px;
color: #999999;
background-color: #000000;
height: 114px;
border:solid 0px #000000;
width:762px;
position: fixed;
top:0;
left:50%;
margin-left:-381px;

}

 

and now it works