Wickham's XHTML & CSS tutorial

Sitemap | Home | Search

Maximum and minimum width

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.


Max-width and min-width attributes applied to a whole page: no Javascript/ActiveX

1 green icon Now that IE7 is available it is probably best to use centralised max-width and min-width attributes which modern browsers support and use a centralised fixed or percentage width for IE6 contained in a conditional comment. This is the simplest solution that doesn't use Javascript/ActiveX and isn't a hack. However, IE6 and other older browsers will have fixed or percentage widths without maximum or minimum widths. Typical code in the stylesheet or head section style tags (which has been used for the code of this page) would be:-

<style type="text/css">
#maxmin { max-width: 900px; min-width: 650px; margin: 0 auto; border: none; padding: 0; }
</style>

The above styles are for IE7, Firefox and other modern browsers. See the conditional comment below for IE browsers less than IE7.

<!--[if lt ie 7]> <style type="text/css"> #maxmin { width: 730px; } </style> <![endif]-->

If a percentage width is given for IE6 the page might expand to too great a width on large screen resolutions like 1920*1200 and look very stretched so a fixed width is preferable. I have noticed that while a fixed width centralises in IE6, a percentage width does not. [if lt ie 7] means if less than IE7.

I have noticed that if the width is put in the main style next to the max-width and min-width and there is no conditional comment, IE6 uses the width and ignores the max-width and min-width but so do IE7, Firefox and Safari for Windows. So the width for IE6 must go in a conditional comment if the max-width and min-width are to work for modern browsers. Other old browsers, not seeing a width in the main style and not having a conditional comment, will just be totally flexible in width.

See w3.org item 10.4.


Alternative methods


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.

horses
horses
 

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 is either fixed 730px width (IE6) or has a minimum width of 650px (modern browsers).

The style code in the head section is:-

<style type="text/css">
.max-width550 { max-width: 550px; width:expression( document.body.clientWidth > 550? "550px": "auto" ); }
</style>

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

<p class="max-width550">...Text in p tag...</p>


Maximum and minimum width for IE6 using width:expression

5 green icon There is a slightly more complex code on Backgrounds full height for IE6 which uses a width:expression and has combined minimum and maximum widths which work in IE6 with ActiveX (and in modern browsers). Look at the source code for the conditional comment with code for [if lt ie 7], ie less than IE7.


Maximum and minimum width combined with full height backgrounds and "sticky footer"

6 green icon There is a slightly more complex code on Backgrounds full height which uses minimum and maximum widths for modern browsers (but a fixed width for IE6) and full height background colors or images and a "sticky footer".


Notes

View/Source or View/Page Source in browser menu to see all xhtml 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 &lt;p>Little Egret&lt;/p> instead of <p>Little Egret</p>. The code &lt; 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


top | prev | next

 

Google
web www.wickham43.com/