Go to TopConstraining Page Width

With the rapid increase in size of screens over recent years it has become common place to design sites with pages that do not expand to fill the full width of the screen. This site is an example. Once the window in which the site is viewed expands beyond 900px, the main body of the page does not expand further. It is constrained to that width.

This approach has a number of advantages. For the web designer it means that the visitor is less likely to destroy the appearance of the design even when viewing a page maximised on a high resolution screen and for the visitor the site remains reasonably easy to read the text because line length is not being extended indefinitely. The technique to achieve this is very simple to apply and also provides one way over overcoming certain bugs and shortcomings in older browsers.

Go to TopAdding a "Wrapper"

To achieve this constraining of page width one simply places all content in a generic container (<div> tag), assign it an ID, by convention "#wrapper", and add a few simple rules.

After completing the design of the Master Page simply do this:

Prepare the Styling Rules

1. Open the CSS Stylesheets dialogue and create a rule "#wrapper" (without the quotes). Populate this with the following code:

width: 900px;
text-align: left;
margin: auto;

EXPLANATION: The width figure can be any that you wish. Popular values are 770px, 960px, being sufficient to create a reasonable margin around an 800x600 or 1024x768 screen, or a percentage of 90% or below. It may also be desirable to add "min-width;760px;" and/or "max-width:950px;" to these rules. Older browsers don't understand min and max width, so if you set a width first the older browsers ignore the min and max values, while modern ones read the min and max and ignore the earlier fixed width value. The text alignment is to reinstate a default that we are about to reset for the <body> tag. The margins are set to auto-equalise, thereby centring the the constrained page.

2. If you don't already have a rule for "body" create one. Note any existing rules that conflict with the following, and if they do, add them to the #wrapper rules. Then add or edit the rules to read as follows:

margin: 0;
padding: 0;
text-align: center;

EXPLANATION: Setting margin and padding to 0 overcomes minor differences in the default settings of various browsers and so helps your design to display in a consistent manner. The text-align setting is a fallback, designed to centre the wrapper in older browsers that don't understand the margin:auto setting used for the wrapper.

OPTIONS: Normally, you will also want to add a rule for a background colour and/or image here, that contrasts or complements the main body of the page.

You might also wish to move any rules not listed in this step to the new #wrapper rules, as in reality this has now become the location for you page body rules.

Add the Container to the Page and Apply the Rules

Having created the rules, we need to add the container to the page, to implement the new feature:

1. Select and cut the entire master page content (CTRL-A, CTRL-X will do nicely!)

2. On the Formatting Toolbar, drop down the Paragraph formatting list and change "Body Text" to "Generic container (div)". (A dotted red box will appear across the page with the cursor flashing inside the box.)

3. Paste the contents of the clipboard (CTRL-V or a Wheel-Click are probably the quickest methods!)

NOTE: When pasting, take care not to use a method that selects the <div> just created. i.e. do not click on the status line first, or right-click inside the red dotted line to choose "paste" from the menu that appears.
If you do, you replace the container with the contents of the clipboard, rather than insert the contents within the container.

4. On the Status Line, right-click on the <div> tag immediately to the right of the <body> tag. From the menu select "ID" on the menu, then "wrapper". (The <div> button changes to read <div id="wrapper"> and the new rules are applied.)

Job Done!

Go to Top Page updated: 19 September 2010