Skip to main contentSkip to section navigation
Web Style Guide

Page layout

Laying out Web pages involves a bit of wizardry. HTML was designed by engineers and scientists who never envisioned it as a page layout tool. Their aim was to provide a way to describe structural information about a document, not a tool to determine a document's appearance. Once the real world started to work on the Web, graphic designers began adapting the primitive tools of HTML to produce documents that looked more like their print counterparts. The point was not to produce "jazzier" or "prettier" pages. The layout conventions of print documents have evolved over hundreds of years for concrete and practical reasons, and they offer many functional advantages over the simplistic, single-column page layout envisioned by the original designers of the World Wide Web.

Screen shot: Section 508 Summary of Section 508 Standards page

Flexible design

The Web is a flexible medium designed to accommodate different types of users and a variety of display devices. Unlike a printed document, which is "fixed" in its medium, the look of a Web page depends on such elements as the display size, resolution, and color settings, the height and width of the browser window, software preferences such as link and background color settings, and available fonts. Indeed, there is no way to have complete control over the design of a Web page. The best approach, then, is to embrace the medium and design flexible pages that are legible and accessible to all users.

Layout with style sheets

One of the visual properties that Cascading Style Sheets are meant to describe is how elements are positioned on the page. Style sheet positioning allows designers to set margins, to position text and images on the page relative to one another, to hide and show elements, and to stack elements so they overlay one another. In theory, style sheet positioning should provide all the design control needed to lay out visually appealing and legible Web pages. In practice, however, browser inconsistencies have rendered style sheet positioning useless, at least for the time being. Though the W3C specifications for style sheet positioning contain most of the tools needed for good design, Microsoft and Netscape have done a particularly poor job of implementing them, so that properties such as borders and margins display quite differently from browser to browser. If you are creating a site for a diverse audience you should steer clear of style sheet positioning for now and design your pages using layout tables as described below. If standards compliance is a priority, use style sheet positioning for page layout, but keep your layouts simple and be ready to accept variability across browsers and platforms.

Section contents