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.

Screenshot showing mx-width set at 1300px.  Screenshot 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