HTML and CSS Reference
In-Depth Information
Fluid-width websites are often used when a page has a lot of information and the designer wants to make the most of
the space available.
Fixed
Fixed-width layouts are made by giving the element that contains the rest of the page's elements—in the case of
Cool Shoes & Socks, the
<body>
element—a
width
property. The
width
property is usually a pixel value such
as 960px, which makes the
<body>
element always 960px, regardless of the size of the browser.
Why a width of 960px? When the web was accessed by fewer types of devices (mainly the only consideration was
differing desktop display sizes), it was wise to use a width of 960px because the most-used screen resolution was
1,024 × 768, meaning that 960px would fit nicely into a 1,024px display (as shown in Figure 6-1), as well as any-
thing bigger than that. If a web page is 1,260px wide and is viewed on a screen 1,024px wide, the browser has to
show horizontal scroll bars to allow the user to move across to see the full page. Likewise, if viewing a web page
that is 960px wide on a screen or in a browser window less than 960px, horizontal scroll bars appear. Although you
can't control the size of the browser window, you can make a web page a size that fits in the majority of screen sizes.
The choice of the browser window size and whether a horizontal scroll bar appears is then left to the user.
So, what's wrong with horizontal scroll bars? Because users expect a web page to be navigated vertically, the addi-
tion of a horizontal scroll bar can make navigation around a web page feel awkward. For the sake of good usability,
you should avoid horizontal scroll bars where possible.
