Header fixed vertically, example 1
View in Firefox, Safari, Opera and IE but IE6 often needs different solutions. In general IE7 and IE8 display like Firefox apart from the HTML5 and CSS3 features. The IE9 & above updates are mainly related to HTML 5 and CSS3 issues and display to a large extent like other main browsers. Google Chrome is based on the same WebKit engine as Safari.
Some of the examples are provided just to show problems, others show solutions that work in most major browsers. Use the example that suits you.
problems 
warning: works in some situations or some browsers or needs care to display as you wish 
OK in Firefox, Safari, Opera, Google Chrome and IE
Position: fixed for header with fixed width page
1 This example uses a fixed width for the header and content and uses position: fixed for the header. It works in IE7, IE8, Firefox, Opera and Safari.
Position: fixed does not work in IE6 and so the header scrolls in IE6.
The width is set at 770px (730 + 2*20px padding).
The header comprises a #headercontainer with position: relative, a width and margin: auto so that it centralises and contains the position: fixed div of the same width with top: 0. so that it fills the container wherever that may be in the width of the viewport but is fixed to the top.
I have put the styles in the head section of this page so that they are not all mixed up with stylesheet styles for the site as a whole. The codes are:-
<style type="text/css">
#body1 { margin: 0; }
div { padding: 0; border: none; }
#headercontainer { position: relative; width: 730px; height: 85px; margin: 0 auto; padding: 0 20px; }
#header { position: fixed; top: 0; width: 730px; margin: 0; padding: 0; color: #335500; background-color: #e9e9e2; }
.toplinkleft { width: 75px; float: left; margin-top: 20px; }
.toplinkright { width: 75px; float: right; text-align: right; margin-top: 20px; }
#maintext1 { padding: 0 20px 20px 20px; width: 730px; margin: 0 auto; color: #335500; background-color: #e9e9e2; }
h1 { margin-top: 20px; }
</style>
<!--[if gte ie 7]>
<style type="text/css">
#maintext1 { padding: 20px; }
.toplinkleft { margin-top: 30px; }
.toplinkright { margin-top: 30px; }
</style>
<![endif]-->
Example 2
Example 2 has max-width and min-width for the header and content and width:expression to enable max-width and min-width to work in IE6 and a fixed header in browsers. In IE6 the header scrolls.
Notes
View/Source or View/Page Source in browser menu to see all xhtml code.
A lot of codes have been put in html tags or in a style tag in the head section in these examples rather than in a stylesheet. I have done this for the convenience of the viewer so that most (but not all) codes are in one place and the stylesheet does not always have to be viewed in addition where so many styles relating to other pages would be confusing. When coding your own page you should try to put as much as possible in a stylesheet and link with id or class to the html tag.
Remember that when a Doctype is included above the head before the html tag (as it should be) then the overall width of a div is its defined width plus borders, margins and padding widths.
If there are differences between Firefox and IE that cannot be overcome with one code, code first to get a satisfactory solution in Firefox then create an IF style which will only apply to IE:-
for instance, if margin-top: 20px; in Firefox needs to be margin-top: 30px; in IE then put the following in the head of the html/xhtml page:-
<!--[if ie]>
<style type="text/css"> div { margin-top: 30px; } </style>
<![endif]-->
or if there are many different styles, create a separate stylesheet:-
<!--[if ie]>
<link rel="stylesheet" href="ie6.css" type="text/css"/>
<![endif]-->
IE will contain just the amended styles such as div { margin-top: 30px; } and others (no head or body tags or Doctype).
When looking at a page source for this site you may see code like <p>Little Egret</p> instead of <p>Little Egret</p>. The code < is because in that instance the code is to be displayed on the screen as text. If the < symbol was placed in the code a browser would activate the code and it would not display as text. Such code is not normally required when writing xhtml code tags which are to be activated.
© Wickham 2008