Position:fixed header in 3 col layout?

[Bo]

How can make the header position:fixed in the code below? If I add it to the
header div it moves to the right and messes up the layout in IE7. Is it
possible to have a 3 col layout with position:fixed header somehow?

<style type='text/css'>

..wrapper{
margin: 0px auto;
width: 986px;
background-color: #ffffff
}
..header{
float: left;
width: 986px;
height: 114px;
}
..contents{
background-color:#ffffff;
float:left;
width:986px;
}
..left1{
float: left;
margin-right: 20px;
margin-top: 10px;
width: 180px;
background-color: #ffffff
}
..left2{
float: left;
margin-right: 20px;
margin-top: 20px;
width: 606px;
background-color: #ffffff
}
..right{
float: right;
margin-top: 20px;
width: 160px;
background-color: #ffffff
}
..footer{
float: left;
width: 100%;
}

body {
padding: 0px;
margin: 0px;
background-attachment: fixed;
background-color: #7F7F7F;
background-image: url(/layout/bg_grey.png);
background-repeat: repeat-x;
background-position: left top;
min-width:986px;

}
</style>

 

[dorayme]

How can make the header position:fixed in the code below?

Supply a URL

 

[John Hosking]

How can make the header position:fixed in the code below?
position:fixed;

If I add it to the
header div it moves to the right and messes up the layout in IE7.

To the right of what?
Only in IE7? No other browser?

Is it
possible to have a 3 col layout with position:fixed header somehow?
Yes.


<style type='text/css'>

Post a URL, not (some disconnected) code.

.header{
float: left;

If 'position' has the value 'absolute' or 'fixed', the box is absolutely
positioned, the computed value of 'float' is 'none', and display is set
according to the table below. The position of the box will be determined by
the 'top', 'right', 'bottom' and 'left' properties and the box's containing
block.
- http://www.w3.org/TR/CSS2/visuren.html#dis-pos-flo

 

[Bo]

Supply a URL

http://digitalt.host22.com/test1.htm header above and centered in IE8,
latest firefox and Chrome.

Screenshots
IE7 http://img258.imageshack.us/img258/9611/testie7.jpg
IE8 (Firefox/Chrome latest)
http://img258.imageshack.us/img258/7451/testie8m.jpg

 

[dorayme]

http://digitalt.host22.com/test1.htm header above and centered in IE8,
latest firefox and Chrome.

Screenshots
IE7 http://img258.imageshack.us/img258/9611/testie7.jpg
IE8 (Firefox/Chrome latest)
http://img258.imageshack.us/img258/7451/testie8m.jpg

I can't test on IE7 (or 8) just now but why have you got float left on
the header?