How to Get Web Pages to Auto Fit the Screen

We've all seen them: Websites that are too wide or too narrow. The ones that are too wide we have to scroll from side to side, but those that are too narrow only take up a small percentage of the available space.

...

You will now learn how to design a Web page so that when the browser screen gets larger, so does the Web page, and when the browser screen is shrunk, so is the Web page.

Build a table using percentages

Step

Start a table and specify the width like this:

Step

Step

Building a table with percentages tells the table cell to conform to the size of the browser window.

Step

Make a colored background cell. So that you can see your Web page expanding and shrinking, make a cell with color like this:

Step

Step

000000 will make the cell black.

Step

End the table. You must now enter the code to finish the table:

Step

Step

Save your Web page. You have now made a Wweb page that will auto-fit the browser screen. Save the file in an easy-to-find directory and give the file any name, but be sure to give the file either an .htm or .html extension.

Step

View your Web page with a browser. In any browser, go to "File" in the upper-left corner and click. Then select "Open" or "Open File" (depending on which browser you are using). Navigate to your Web page and click "OK."

Step

Check the Web page to see whether it automatically fits the screen. You should now see a thick black line at the top of your screen. When you expand and shrink the browser window, you should see the black line expand and contract.

Step

Enter your content within the table cell and all content will conform to the width of the browser screen.