Enter a query to search our site. Note that you can use "*" and "?" as wildcards. Enclosing more than one word in double quotes ("CSS Layout") will search for the exact phrase.

PVII Set Min Width

PVII Set Min Width is a JavaScript solution to Internet Explorer's lack of support for the CSS min-width property. The min-width property is often used in fluid (stretchy) layouts so that when the browser window is made narrow, the content does not become so narrow that it becomes unreadable. The min-width property establishes a minimum width, beyond which fluid content areas cease becoming narrower - instead causing the browser window to spawn a horizontal scrollbar.

Download PVII Set Min Width Now

The PVII Set Min Width script provides min-width capabilities for Internet Explorer versions 5.x - 6.x on both Windows and Mac platforms. PVII Set Min Width runs automatically without the need for explicit event handlers and works when your page loads and also when it is resized. The scripts provide a robust and stable solution beyond the scope of simpler solutions. The script automatically calculates for left and right padding, left and right margins, and left and right borders -thereby compensating for anomalies in browser support for the CSS box model. This means you can simply select the element and the desired minimum width and the script will take care of calculating any margins, padding, or borders you have assigned.

How it works

The PVII Set Min Width command adds a script to your page that will compare the width of the browser window to the width of the element that you specify. When the width of the browser window is less than the amount that you specify, in pixels, then the script will adjust the width of the element to prevent it from becoming narrower. The browser will spawn a horizontal scroll bar.

Deployment Strategy

The PVII Set Min Width command is best deployed when applied to a containing div, commonly called a wrapper div, that houses the other main elements of your page, such as one or more sidebars and a main content area. The minimum width effect will be applied against the entire construct, allowing one or more of the contained elements to be fluid.

To prevent recursive resizing (browser freezes) do not attempt to apply the behavior to a single div (or page element) if the design contains other elements outside of this div that affect the page width, or to an element whose border, width, padding or margin styles are set in ems or percentages. The PVII Set Min Width script is designed to act on a single page spanning element whose width can be compared against the width of the browser window, typically a containing or wrapper div.

Note: The PVII Set Min Width command will be grayed out, unavailable, if there are no page elements with an id attribute. You must have at least one element with an id attribute on your page.

Examples

The following links will open example pages in a popup window. The example page is a fluid 3-column layout, with the center column fluid, it will expand and contract with the browser window width. To see the effects of the script, view the examples in Internet Explorer 5 or higher on either a PC or a Mac. Resize the width of the example page browser window and note the differences between the two.

  1. Without a width fix: Decrease the browser window width and the fluid center column will decrease to a very narrow, unreadable width. Make the window even narrower and the layout will break - the center column will drop underneath the sidebar columns.
  2. With the PVII Set Min Width fix applied: This page remains stable because the content area is set to be no less than 750 pixels wide. If the browser window is narrower than 750 pixels then the PVII Set Min Width scripts work to assure that the content area remains set to 750 pixels and the browser spawns a horizontal scrollbar. The center column remains fully readable and the page structure does not break.

Adding the PVII Set Min Width command

  1. Choose Commands - Studio VII - Set Min Width by PVII to open the interface.
  2. Select the page element to which you wish to apply the minimum width to from the Element listing.
  3. Enter the minimum width you wish to apply in the Min Width box.
  4. Click the OK button to add the Set Min Width by PVII scripts to your page. It runs automatically when your page loads in a browser.

Modifying an existing PVII Set Min Width command

  1. Choose Commands - Studio VII - Set Min Width by PVII to open the interface. The existing element and minimum width will be displayed in the user interface.
  2. Select the page element to which you wish to apply the minimum width to from the Element listing.
  3. Enter the minimum width you wish to apply in the Min Width box.
  4. Click the OK button to apply the changes to the scripts.

Note: Modify is not supported when the scripts are located in an externally linked JavaScript file, you must manually edit the scripts or add the scripts back to the page.

How to modify when the scripts are placed in an external file
[for advanced users only]

If you've moved the scripts to an external JavaScript file you will not be able to run the visual Modify interface. You can use a utility such as PVII Productivity Tools to automatically move the scripts from an external file back into the page and then back again to the external file - or you can manually edit the script to reflect the element you wish to set a min-width for and the min-width you wish to set. Look for this function towards the middle of the scripts:

P7_limit('wrapper',750);

There are two arguments listed inside the parentheses. These are the only items you need to change. The first argument sets the element that the script will act on. The second argument sets the minimum width. If for instance you wanted to change the script to act on an element whose ID is mainwrapper and you want to set its minimum width to 724 pixels, the P7_limit function would need to look like this:

P7_limit('mainwrapper',724);

After editing the JavaScript file be sure to save it. If you encounter any problems after the edit, you've likely mistyped something. To restore the scripts to working order, run the PVII Set Min Width command on your page. The command will write a new script in the head area of your page. At that point, you can compare it to the script you edited to find and correct your error. When done, remove the script that is in your page.

Removing the PVII Set Min Width command

  1. Choose Commands - Studio VII - Set Min Width by PVII to open the interface. The existing element and minimum width will be displayed in the user interface.
  2. Click the Remove button to completely remove the PVII Set Min Width scripts from your page.

Note: Remove is not supported when the scripts are located in an externally linked JavaScript file, you must manually remove the scripts from the external file.

The Interface:

The PVII Set Min Width interface allows you to select the page element and set its minimum width.

Element

Select the element on your page that you wish to apply the Min Width behavior to. This listing includes all elements on your page that have been assigned an id, for example:

<div id-"wrapper">  

Min Width (px)

Enter the minimum width that you wish to use. When the browser window is less than this width the scripts will prevent the element from becoming narrower than this width. The width is always entered in pixels.

OK

When you are finished entering or editing the path, and set the option, click the OK button to apply the PVII Set Min Width scripts to your page. You can preview the page in your browser to check functionality.

Remove

Click the Remove button to completely remove the PVII Set Min Width scripts from your page.

Note: If the scripts are located in an external JavaScript file the Remove function will be unavailable, you must manually remove the scripts from the external file.

Cancel

Click the Cancel button to completely abort the current PVII Set Min Width operation. This will close the interface and no changes will be made to your page.

Help

Click the Help button to open the associated Help File in your browser. This page can remain open for easy reference while you continue working with the PVII Set Min Width interface.

Back to main extensions listing | Download PVII Set Min Width

Additional reading:

A step-by-step Set Min width tutorial