Wickham's HTML & CSS tutorial

Maximum and minimum width using the Jello Mold method

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

View at different screen resolutions to see the differences.

General information and max-width and min-width attributes

I first drafted this page before IE7 was available, so the page was coded using Jello Mold's method to enable IE6 to expand and contract in width between set limits. However, I cannot be sure that it works in all browsers. If it doesn't work in a certain browser, the likely outcome is that the page is either fixed or flexible, neither of which is serious, so I still quite like this method because it gives maximum and minimum widths to IE6 as well as all other browsers I have tried.

If designing a page now it is probably best to use max-width and min-width attributes for modern browsers coupled with a centralised fixed width in a conditional comment for IE6 and other older browsers which is the simplest and safest method. See Maximum and minimum width.

The Jello Mold method for setting maximum and minimum width for a whole webpage

1 green icon This page is set up to have a minimum width of 700px and a maximum width of 1000px at a window resolution of 1280px width. It expands and contracts as necessary between those limits. At 700px window resolution it will show its minimum width of 700px (although there is side padding within the wrapper of 20px). It expands gradually until it shows a maximum width of 1000px at a window resolution of 1280px.
Note: this method employs the "Holly hack" and works with IE6, IE7, Firefox, Safari for Windows and Netscape.
The zoom control in IE7 affects this hack; there are still maximum and minimum dimensions but everything is increased or reduced.

The code is taken from Jello Molds.
You have to insert your own preferences for maximum and minimum widths and the window resolution at which the maximum width is to apply on this webpage which adjusts the webpage. You then look at the page source to see the styles you require.

There is a demo here or consider this page as a demo.

For this example the styles have been put in the head for the page rather than in the stylesheet. They have been repeated below:-

The body tag for this page has had padding: 0; added so that the max/min can work without distortion from the body style in the stylesheet.
The html page has additional divs bodydiv, sizer, expander and wrapper.

Maximum and minimum width combined with header fixed vertically

2 gold icon Here are two examples of a header that stays visible during scrolling of content below while the whole page is also subject to a maximum and minimum widths. Neither example is perfect because the header scrolls in IE6.

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.

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 modern browsers. In IE6 the header scrolls.

Both examples are satisfactory provided you know the probable window resolution of your target viewers; if you set the minimum just below 800px width then most viewers on computers will have no problem, just those on small screen devices.

Maximum width for elements

3 green icon IE6 does not support the max-width tag although IE7 and Firefox do. However, a small bit of code (that needs ActiveX) will make it work in IE6 for images.
If you only have one image then it can be resized by adding width: **px; to the img code as in <img style="width: 150px;" src="image.jpg" alt="image description"/> which will resize a larger image height in proportion to the width if no height is stated but it will also enlarge smaller images if they have the same code.
The max-width code below is useful if you are setting up a template which will have images of different sizes. It will leave images that are smaller than the maximum without resizing so you may need to check that a smaller width does not alter the layout. The max-width code will resize only images which are larger than the maximum as these would very probably disrupt the page layout if not resized.

The image below left has no width stated as an attribute so it just displays with its basic size of 200*50 px. If this image with a width of 200px is inserted in a div or table cell with a smaller width the div or table cell will expand to accommodate the larger image. The example below right is in a div width: 150px but the image is still displayed as 200px wide.

However, a width: expression code does work in IE6 with ActiveX. The following image 200*50px has been given a maximum width of 150px and as no height is stated the height is adjusted in proportion. An image 50*50px has also been included with a max-width code and this is unaffected:-

<p class="center"><img style="max-width: 150px; width: expression(this.width > 150 ? 150: true);" src="images/horses200x50.jpg" alt="horses">
<img style="max-width: 150px; width: expression(this.width > 150 ? 150: true);" src="images/beetle50x50.jpg" alt="beetle"></p>

horses beetle

4 green icon The width expression above does not work for text in IE6 but a slightly different code will work in IE6 (and IE7, Firefox and other modern browsers). The code needs Javascript/ActiveX.

This text is in a <p> tag with a class="max-width550" that works in IE6, IE7, Firefox and other modern browsers. The maximum width has been set to 550px. However, there is no minimum width and it is not a fixed width so the text will be squashed up if the window is made smaller (except that you cannot test that here because the whole page has a minimum width of 700px (modern and old browsers).

The style code in the head section is:-

The width: expression works in IE6 and other older browsers not supporting max-width. The max-width: 550px is for IE7, Firefox and other modern browsers and works without Javascript/ActiveX. The width: expression should be separated in a conditional comment for IE6 if the maximum width is less than the max-width for modern browsers. If it is in the general style tag with a larger max-width, modern browsers will use the width: expression. In this case the max-width and the width: expression are the same value.

The code in the body html is:-

Notes

View/Source or View/Page Source in browser menu to see all html code.

The stylesheet tutorial.css for the remainder of styles is here.

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.

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