Max/min width and a header fixed vertically;
example 2
View in Firefox and IE6 to see the differences. In general IE7 displays like Firefox. IE refers to IE6 and IE7.
Some of the examples are provided just to show problems, others show solutions that work in Firefox, IE6 and IE7. Use the example that suits you.
problems 
warning: works in some situations or needs care to display as you wish 
OK in Firefox, IE6 and IE7
Max/min width and using position: fixed for header
1 This example uses max-width and min-width for the lower content and position: fixed for the header. It works in IE7, IE8, Firefox, Opera and Safari.
A different solution is used for IE6 and is included as a conditional comment in an <!--[if lt ie 7]> (ie less than IE7) style which is a hack called the Jello Mold method for max-width and min-width but the header will scroll because position: fixed does not work in IE6. It needs ActiveX to work.
The max-width and min-width are set at 770px (730 + 2*20px padding) and 500px (460 + 2*20px padding) which is fairly low so that you can see the effect with most window resolutions.
The header is also coded to operate the max-width and min-width like the lower content. The header comprises a position: fixed containing div with top: 0; and with an inner div which has a max-width and min-width and margin: auto so that it centralises in the fixed containing div.
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: fixed; top: 0; left: 0; right: 0; height: 85px; margin: 0; padding: 0; color: #335500; background-color: #e9e9e2; }
#header { position: relative; max-width: 730px; min-width: 460px; margin: 0 auto; padding: 0 20px; }
.toplinkleft { width: 75px; float: left; }
.toplinkright { width: 75px; float: right; text-align: right; }
#maintext1 { padding: 105px 20px 20px 20px; max-width: 730px; min-width: 460px; margin: 0 auto; color: #335500; background-color: #e9e9e2; }
.fullwidth0pxhigh { font-size: 0px; clear: both; line-height: 0px; padding: 0px; }
/*4 Divs for max-min hack adjusted below, as only applicable to IE6:-*/
#bodydiv { padding: 0; margin: 0; }
#sizer { padding: 0; margin: 0; }
#expander { padding: 0; margin: 0; }
#wrapper { padding: 0; margin: 0; }
h1 { margin-top: 20px; }
</style>
<!--[if gte ie 7]>
<style type="text/css">
#maintext1 { padding: 125px 20px 20px 20px; }
.toplinkleft { margin-top: 30px; }
.toplinkright { margin-top: 30px; }
</style>
<![endif]-->
<!--[if lt ie 7]>
/*for IE6 max/min hack as position: fixed does not work*/
<link rel="stylesheet" href="ie6maxmin.css" type="text/css">
<![endif]-->
The body xhtml code is very conventional with the header divs first followed by the content div (#maintext1). The additional divs #bodydiv, #sizer, #expander and #wrapper immediately after the <body> tag are for the IE6 styles in a separate stylesheet within an <!--[if lt ie 7]> (less than IE7) since position: fixed, max-width and min-width will not work in IE6; they are all given no styles above except padding: 0; margin: 0; as they are not needed for IE7 or Firefox. Look at the source code.
Different code for IE6
2 Since IE6 does not support max-width or min-width or position: fixed a hack has to be employed. There are a hacks for both max-width and min-width and position fixed, but you can't combine them, so a choice must be made and max-width and min-width have been chosen here as it is probably more important to control the maximum width than to display a header at all times.
The Jello Mold method of maximum and minimum width shown for the Jello Mold maximum and minimum width page could apply to any browser but is repeated here just for IE6, contained in a stylesheet:-
<!--ie less than IE7 for IE6 max/min hack as position: fixed does not work-->
<!--[if lt ie 7]>
<link rel="stylesheet" href="ie6maxmin.css" type="text/css">
<![endif]-->
The code in it is:-
/*sets IE6 to reach 770px at 800px resolution and minimum 500px*/
#bodydiv {
background-color: #e9e9e2; color: #335500;
padding: 0 250px 0 250px;
text-align: center; /* centering hack for IE5.x/Win */
}
#sizer {
width:expression(document.body.clientwidth > 800 ? "270px" : "90%" );
margin: 0 auto 0 auto; /* standard centering method */
text-align: left; /* resets centering hack to default */
/*max-width: 270px; used for other browsers, not for IE6; #sizer for page sizes max/min 770 - 500 = 270 */
padding: 0;
}
#expander {
margin: 0 -250px 0 -250px;
position: relative;
min-width: 500px;
text-align: left;
padding: 0;
}
/* Holly hack for IE \*/
* html #bodydiv,
* html #sizer,
* html #expander { height: 0; }
/* helps IE get the child percentages right. */
#wrapper { width: 100%; padding: 0; margin: 0; }
#banner { position: absolute; width: auto; padding: 0 40px; background: transparent; border: none; }
#maintext1 { width: auto; margin-top: -85px; }
.toplinkleft { margin-top: 30px; }
.toplinkright { margin-top: 30px; }
In the code for the Maximum and minimum width page referred to earlier the code had max-width for #sizer for modern browsers and also an <!--[if lt ie 7]> with a width:expression style for IE6. Since the code for the above stylesheet is just for IE6 and lower versions it has been revised just to include the width:expression.
Example 1
Example 1 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. 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 2006 updated 2008