How Do You Make a Web Page Fit the Screen?

A laptop with a full-screen image

There are a few different web design strategies to make a web page fill the entire browser window no matter what the size of the page. Here are three techniques that are either simple, moderately complex, and advanced, which you can use to optimize your site.

The Simple Way: Use Tables

One of the most common methods used from the beginning of web design was to use tables to surround your content. If you set the table width and height at "100%", then the table would expand to the edges of the browser window whether it was a small 640x480 screen or a more advanced high-resolution monitor.

The HTML code for tables is very common and well known, and the "width" property is set right in the very beginning of the code:

<TABLE width=100% height=100%><TR><TD>Your Content goes here</TD></TR></TABLE>

If you wanted to get fancy, you could "nest" one table inside the other, setting the alignment of the inner table to "center", which would make your content "float" in the exact center of the browser window:

<TABLE width=100% height=100%><TR><TD><TABLE align="center"><TR><TD>Your Content goes here</TD></TR></TABLE></TD></TR></TABLE>

You can see examples of TABLE code and try out your own variations with properties such as background colors at the W3Schools website.

Using CSS for the Ultimate Liquid Layout

With the advent of cascading style sheets, the idea of "liquid layouts" meant that your web content would expand and contract gracefully depending on the size of the browser window it was in. Usually, these layouts had "fixed-width" columns either on the left, right, or on both sides, and a larger area in the middle for the content that would expand or contract. Matthew James Taylor has written extensively on how to set up good layouts using CSS, and includes many free downloadable templates for your website content.

His layouts are quite extensive, but the sections that apply to making the site fit the page are relatively simple. They use two percentages, 50% and 25%, for two of the columns, and the third column simply takes up whatever percentage remains (25%). The CSS code is freely downloadable from the site, and the code that regulates the columns is clearly marked:

/* 3 Column settings */.threecol {background:#eee; /* sets the background color of the right column*/}.threecol .colmid {right:25%; /* sets the width of the right column */background:#ccc; /* sets the background color of the center column */}.threecol .colleft {right:50%; /* sets the width of the middle column */background:#f4f4f4; /* sets the background color of the left column */}

There is more code used in each column to give the content a 2% border, and the heights are actually regulated by a header and footer section with many other settings such as fonts and borders. The beauty of CSS is that it makes it easy to change the entire site with just a few lines of code. For example, if you wanted to make it into a two-column layout, you could simply remove the ".colmid" section of the above code. The middle column would still be at 50% of the page, and the "threecol." section would fill up the rest, stretching to match the rest of the page.

There are many places to learn more CSS tricks, but one of the best is called A CSS Zen Garden, which showcases many different ways to fill a page with images and content innovatively and beautifully.

Advanced Web Layouts Using Conditional Javascript

For more advanced coders there is a method of using Javascript to detect what kind of browser and screen the viewer is using and changing to an alternate stylesheet for the appropriate layout. An article by Marc Van Den Dobbelstein on A List Apart explains how to develop separate classes for screens all the way from "super wide" (greater than 1280 pixels wide) to simple vertical PDA layouts such as the iPhone. You can see how it works through a sample page of the "switchy McLayout" technique, but it involves several rather extensive coding techniques that goes far beyond the basic table HTML. However, once you master that level of coding, it is possible to adjust your website based on many different factors, including screen height, the presence of a scrollbar, font size, mouse position, and color depth.

Making the Content Both Formal and Functional

The advantage to making sure your website fills the screen is that it provides better focus for the content of your site. In the end, if your content is easier to read it will be easier to understand, making the flow of information between you and your users more seamless. Whatever technique you use, it's worth the time to make your site look better on the screen.

Was this page useful?
Related & Popular
How Do You Make a Web Page Fit the Screen?