As we begin to delve further into CSS techniques involving the box model, positioning, and sizing, the more advisable it is to test pages by resizing the browser window to see how things will flow and wrap. The Web Developer Toolbar makes changing the browser window to a specific width, such as 1024px or 800px wide, just a mouse click away using the Resize menu.
Using the Resize Menu
The Web Developer Toolbar already has one pre-defined window size ready for use. Click the Resize menu and then choose 800x600. The browser window immediately resizes to the specified dimensions.
You can return the browser window to a larger size by dragging an edge of the browser window or using the Maximize (PC) or Zoom (Mac) function. Alternatively, you can use the Web Developer Toolbar's Resize feature to set up any desired window size as a menu choice, including the normal larger size you prefer.
Setting Up New Window Size Options
To set up custom window sizes, click Resize | Edit Resize Dimensions. The Resize Options dialog box appears.
Click the Add button at the bottom of the Options dialog box. Fill out the popup box with a description and the desired dimensions for a window size setting, similar to the image above. The Resize the Viewport option causes the specified dimensions to be applied to the viewport. Otherwise, with the box unchecked, the dimensions are applied to the overall browser window size. Click OK in both the popup and the Options dialog boxes when done.
You can set up as many window sizes as will be useful to you. I set one up for the standard 1024x768 browser window. I also set one up that is 600x1000 which is the size I prefer when reading large amounts of text online. My latest addition was to set a size that is just slightly smaller than my full screen size.
Once you get in the habit of using the Resize menu you will wonder how you ever got along without it!
Display Window Size
In addition to resizing the browser window to specific dimensions, there are occasions when I manually shrink a window to see how elements on a page behave - frequently watching to see when a horizontal scrollbar appears - and then wonder what size the window actually is. The Web Developer Toolbar gives you a hand with this inquiry too!
With the browser window manually resized to the desired dimensions, click Resize | Display Window Size. A dialog box appears that shows both the total browser dimensions as well as the current width and height of the viewport.
