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.

Using the PVII Min Width Command

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 CSS min-width property establishes a minimum width, beyond which fluid content areas cease becoming narrower.

Before you begin

Please download the PVII Set Min Width extension and install it.

Mac Users Note: Certain Mac configurations can experience difficulties recognizing Dreamweaver's extension file format. If you have problems installing, use Finder to locate the downloaded extension file and double-click it from within the Finder window.

Building a Simple Fluid CSS Page

While PVII Set Min Width can control a complex 3-column CSS positioned layout, it can also control absolutely positioned DIVs - otherwise known as Dreamweaver Layers. For this lesson, you'll build a Dreamweaver Layer in Code View.

  • Create and save a new Dreamweaver document
  • Switch to Code View
  • Make a new line just before the closing </head> tag
  • Create a new Style tag block and a single rule, just like this:
<style type="text/css">
<!--
#mylayer {
    top: 60px;
    left: 20px;
    position: absolute;
    width: auto;
    min-width: 500px;
}
-->
</style>

The min-width property is declared in the style rule because modern browsers such as Mozilla, Firefox, Opera 7, Safari, and Netscape 7 do support it. The PVII Set Min Width command will take care of Internet Explorer 5.x and 6.x - which do not support the property.

  • Create a new line just below the opening <body> tag and enter a new DIV tag block, with a blank line between the opening and closing tags.
  • Assign the DIV an ID of mylayer - just like this:
<div id="mylayer">

</div>

Enter a paragraph of text between the DIV tags.

<div id="mylayer">
<p>Enter a long paragraph of text here.</p>
</div>

Make sure you add enough text to span an entire maximized browser window.

Check your source code to make sure it's correct by comparing your code to ours.

Preview the Page in Internet Explorer 5 or 6

Save your page and preview it in IE5 or 6 on either a PC or a Mac. Reduce your window and note that your text will continue to get narrower and more difficult to read. Keep reducing your window width and you'll see that your Layer will eventually shrink to display just one word per line.

The text shrinks to an unreadable state

Apply the PVII Set Min Width Command

The PVII Set Min Width command will enable Internet Explorer to behave like other modern browsers. That is, instead of scrunching your text down to one or two words per line, it will allow you to set a minimum width for mylayer - beyond which the browser will simply spawn a horizontal scrollbar.

  • Switch to Design View
  • Choose Commands - Studio VII - Set Min Width by PVII
  • Choose mylayer from the Element list
  • Enter 500 in the Min Width box

The PVII Set Min Width User Interface

  • Click Ok to apply the command

The command will write a JavaScript to your page, which will run automatically.

Preview the fixed page in Internet Explorer

Save your page and preview it again in Internet Explorer 5 or 6.

With Set Min Width applied, the text cannot shrink to less than 500 pixels wide

No matter how narrow you make your browser's window, mylayer will never shrink below 500 pixels wide.

Notes and afterthoughts

Your lesson involved a simple layout - but PVII Set Min Width can be employed to fix complex CSS layouts that utilize static and floated elements, as well as absolutely positioned ones.

The following links will open example pages in a popup window. Both pages are structurally identical and use a fluid 3-column layout. The center column expands and contracts with the browser window and both sidebars are fixed. View the examples in Internet Explorer 5 or higher on either a PC or a Mac. Resize the width of the browser window and note the differences between the two.

Without a width fix | With the PVII Set Min Width fix applied

For a complete discussion on the mechanics of the Set Min Width command, please see the command's main informational page.

If you are new to CSS or if you have questions or feedback, the PVII newsgroups are open 24/7 for discussion relating to this tutorial. Outlook Express users will likely be able to load up our server by clicking the link below, while others may need to configure our server in their news reading software.

PVII Newsgroups | server name: forums.projectseven.com