CSS minimum and maximum sizes

If you are using a flexible width layout, you may want to add a maximum width to you page container so the page does not become to wide and make for difficult reading on a large screen monitor.

Example: The April Daisies template is a flexible width layout with the width of the container set at 80%. This means that on a 27" monitor, the page container will fill 80% of the available browser viewport. The same is true on a 15" monitor. The maximum width of the container on this template has been set at 1300px meaning the container will fill 80% of the browser viewport NOT TO EXCEED 1300px.

On the two screenshots shown below, the one on the left shows the max-width set to 1300px and the one on the right show no max-width set.

min-width property

The min-width property sets the minimum width of an element. The min-width property does NOT include padding, borders, or margins! The min-width property is supported in all major browsers, with the exception of IE6 and earlier versions.

NOTE: None of the offered templates makes use of minimum width.

max-width property

The max-width property sets the maximum width of an element. The max-width property does not include padding, borders, or margins! The max-width property is supported in all major browsers, with the exception of IE6 and earlier versions.

NOTE: Some of the offered templates do make use of the max-width property. It can always be removed from the style rules. They also make use of min-max.js.

You can use your web stats to judge how many of your visitors are STILL using Internet Explorer 6 or less.

• Genealogy Web Creations - Jan 2013 thru May 2013 - 2.8%
• Family Genealogy Site  - Jan 2013 thru May 2013 - 2.5%
• Migrating from FrontPage to Expression Web - Jan 2013 thru May 2013 - 2.7%
• Expression Web Tutorials & Templates - Jan 2013 thru May 2013 -  1.4%

Resources

• Min and Max Width/Height in CSS
• max-width from Sitepoint
• Wickham's HTML & CSS tutorial
• max-width from Mozilla
• min-width from Mozilla