Max/min width and a header fixed vertically;
example 2

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.
red icon problems gold icon warning: works in some situations or some browsers or needs care to display as you wish green icon OK in Firefox, Safari, Opera, Google Chrome and IE

Max/min width and using position: fixed for header

1 gold icon 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 (690 + 2*40px padding) and 500px (420 + 2*40px 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.

IE8 beta 2 operates this code well in a file with a .html filename extension, but fails to fix the header with the same code in a file with a .php extension, so I have added the meta tag to emulate IE7 (see the source code just after the head tag). Example 1 has the position: relative div first with the position: fixed div inside with a fixed width, which works in IE8 with both filename extensions, but when used with max-width and min-width needed here the header div scrolls in IE8 with the .php file extension, so either code used with max-width and min-width in IE8 needs the meta tag to emulate IE7 when used with a .php filename extension.

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:-

The body html code is very conventional with the header div (called #banner) 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; they are all given no styles here except padding: 0; margin: 0; as they are not needed for IE7 or Firefox. Look at the source code.

Different code for IE6

2 gold icon 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:-

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 html 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 IE6 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 IE6:-
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:-

or if there are many different styles, create a separate stylesheet:-

IE6 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 html code tags which are to be activated.

top | Sitemap | Home | prev

Max/min width and a header fixed vertically;example 2

Max/min width and using position: fixed for header

Different code for IE6

Example 1

Max/min width and a header fixed vertically;
example 2