How to Make Your Web Page Smaller

By David Wayne

Web browsers such as Internet Explorer, Chrome and Firefox support universal keyboard shortcuts for zooming in and out of Web pages, but HTML and CSS design determines how a page behaves when it's scaled by a user. If you want to make your Web page smaller across all browsers, you can use the width and height attributes in your template code, but you must be careful when specifying absolute dimensions for an object because your page is viewed on a variety of screen sizes. An elegant solution in most cases is to specify an object's width as a percentage of its parent.

Step 1

Make a Web page that you are viewing in your browser smaller by pressing “Ctrl-Minus” to zoom out. Alternatively, set the zoom to 100 percent by pressing “Ctrl-0.” These shortcuts are universal to most browsers, including IE, Chrome and Firefox. Zooming out of a Web page has the same effect on HTML elements as scaling the window; their positioning is determined by the amount of space in the window. To scale the window, left-click a window corner, drag it toward the opposite corner and then release it.

Step 2

Control the height and width of a Web page that you are designing to try to make your viewers' experience consistent. Start by opening your template code in a text editor. Website templates are divided into graphical blocks using div or possibly table elements, although tables aren't designed for this purpose. The outermost div block may have child div blocks, or your Web page may have several top-level div elements without parents. If a div block has children, its opening “

” precedes them and its closing “
” follows them.

Step 3

Find each div element's height and width attributes. Depending on your template's layout, these settings are coded in CSS or HTML, and your template code may include separate CSS and HTML files or combine them into one HTML file. If your Web page has separate CSS and HTML files, they have the same file names, such as index.css and index.html, for example. You can search for div elements in most text editors by pressing “Ctrl-F” to open the Find box and then searching for “div.”

Step 4

Lower a div element's height or width by replacing its current value with a smaller one. This step may take some experimentation, and you can view your changes by opening your updated template code in a Web browser. To do so, right-click the HTML file on your desktop, choose “Open In” and select your browser.

Step 5

Scale your Web page to automatically fit the browser window. Locate the outermost div element's CSS class in your HTML file or its external style sheet. Set its max-width and height attributes to the following values:.outermost-div-element { max-width: 100%; height: auto;}If you want the element to take up less space, insert a lower percentage for max-width. Using this code, the height automatically adjusts according to the width, which is determined by the window's size as it's scaled. The max-width attribute provides a uniform look and feel for your Web page across all screen sizes.

Tips & Warnings

  • The width, max-width and height attributes determine the size of any HTML element. For example, to automatically scale an image, add the following attributes to its CSS definition:
  • img {
  • max-width: 100%;
  • height: auto;
  • width: auto/9;
  • }
  • The “auto/9” value for the width attribute corrects a scaling problem in older versions of IE.