We Value Your Privacy

We and our partners use technology such as cookies on our site to personalise content and ads, provide social media features, and analyse our traffic. Click below to consent to the use of this technology across the web. You can change your mind and change your consent choices at anytime by returning to this site.

Update Consent
Loading ...

How to get web pages to auto fit the screen

Updated July 20, 2017

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.

Loading ...

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.

  1. Start a table and specify the width like this:

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

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

  4. 000000 will make the cell black.

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

  6. 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.

  7. 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."

  8. 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.

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

  10. Tip

    Some people refer to these kinds of Web pages as liquid mastheads.


    Any tables you build inside this main table must be set to 100 per cent (or another percentage) to work correctly. The trick is not to use any fixed width tables in your Web design.

    Loading ...

    Things You'll Need

    • HTML editor
    • Browser

    About the Author

    Wanda Richards writes online tutorials for computer software. She has more then 15 years of experience as a webmaster, audio and video editor, and technical writer. Richards earned a master's in linguistics and taught English as a second language for a number of years.

    Loading ...