How to Make Your Website to Fill an Entire Browser Window with Dreamweaver (www.imagination.gs)

(www.imagination.gs)
Some time ago, I was asked by a visitor to thesitewizard.com how he could make a site with Dreamweaver that filled the entire window. He had used my Dreamweaver tutorial series, and had, as a result created a website that occupied about 80% of the browser width. He wanted the content of his site to fill the entire width of the browser window.

Although this article was primarily written to help those who use my (free) Dreamweaver tutorial series, it is sufficiently general so that it may also be used by anyone using Adobe Dreamweaver CS3 as a web editor, even if the site was not created with the help of my tutorial.

Note though that this guide assumes that you already know how to use Dreamweaver. If you dont, please start with the main tutorial series since it takes you step by step through the process of using Dreamweaver. You can then later come back to this article (after you finish the series) to adjust your site. You may also want to read the article The Beginners A-Z Guide to Starting/Creating Your Own Website, since theres more to creating a website than just designing a web page.

General Information about Dreamweavers Supplied Layouts
Sites created using Dreamweavers supplied HTML layouts generally do not occupy the entire window width by default. As mentioned earlier, the HTML layout selected when you follow my tutorial series, the "2 column liquid, left sidebar, header and footer" layout, only takes up 80% of the window width. It doesnt help to choose another layout either, such as one of the "elastic" layouts, since those also occupy only a certain amount of space (46 em). And if you select one of the "fixed" layouts, you will get a site that occupies a fixed width of 780 pixels.

There are pros and cons to using a fixed width layout as well as to using a relative width one. I will not debate the issues here. I will assume you know what youre doing, and have already made a decision based on your needs. If you want more information, please see my article The Great Fixed Vs Relative Width Page Layout Debate instead.

This is purely a practical guide on how to stretch your web page so that it expands to fill the width of your web browser window (even if its maximized in a high resolution monitor).

Steps to Creating a Website that Occupies the Whole Browser Window Width
Load Your Page or Template in Dreamweaver
To begin, load the web page you want to adjust in Dreamweaver. If you are using Dreamweavers template system to simplify managing your site, you should load your customized template instead of your individual web pages. If you dont know what Im talking about here, please see How to Use Templates to Manage Your Website in Dreamweaver CS3.

If you have no web page in particular to adjust, and want to start a new page, just select any of the supplied layouts in the "New Document" dialog box. You will need to select "Blank Page" on the leftmost column and "HTML" in the "Page Type" column, to be able to see the list of HTML layouts. Since you want your site to occupy the entire width, it probably makes most sense to select one of the "liquid" layouts rather than any of the "fixed" layouts.

To make my explanations in this tutorial less convoluted, I will just assume that youre using the "2 column liquid, left sidebar, header and footer" layout given in my main tutorial. But it really doesnt matter which you choose. The basic concept and procedure is the same.

Select the Container DIV to Customise
Once your page is open, you should be able to see something like the following in Dreamweavers status bar (the line immediately below your web page).

Click the part that says . That portion should now appear depressed. Even though it doesnt look like a button, it behaves like one and can thus be pressed when you click on it. Your entire web page will now appear to be selected in the main window.

Expand the CSS Pane
On the right side of the Dreamweaver window, you should be able to see your "Files" pane. At the top of the pane is an unexpanded "CSS" pane. Click it to expand it. (Note: if you have used my Dreamweaver tutorial series, that pane might already be expanded, since you may have used it to customize your navigation menu buttons. If so, theres no need to click it again, since doing so will collapse the pane. If you have accidentally clicked it to collapse it, just click it again to re-expand it.)

Change the Width

In the CSS pane, doubleclick the "Width" item. A dialog box will appear. In the dialog box, the current width will be shown in the line beginning with "Width". If you are using a liquid layout, the boxes beside it will show "80%". It will show other numbers if you are using the elastic or fixed layouts. Change the number to 100. In the box beside it, make sure that % (the percent sign) is selected. If not, click the drop down arrow beside it and select the percent sign.

When youre done, click the OK button. Your web page will now fill the entire width of the window.

Remember to save your page or template.

Conclusion
As you can see, its a trivial matter to change Dreamweavers default layouts so that your web pages can expand to fill the entire width of a browser window
by Christopher Heng.
(www.imagination.gs)