HTML and CSS Reference
In-Depth Information
outset
: the opposite of
inset
, this reverses the lighting effect so the box appears raised from
the page surface.
Figure 9-2 shows examples of these border styles—all except
none
and
hidden
, of course.
Figure 9-2.
CSS border styles. These each have a width of 5 pixels.
Page Width: Fixed vs. Liquid
At a point early in the process of designing and assembling any website with CSS, you'll have to make an
important decision: will your site's layout have a fixed width that is always the same no matter how wide
the browser window is, or will its width be liquid and adjust dynamically to the window's width? This has
been a topic of much lively debate among web designers for years.
Many designers create sites with a fixed width because it allows for precise alignment of the page
elements in a predictable, rigid grid. Other designers prefer liquid widths that flex automatically, letting
viewers set their browsers as wide or as narrow as they like while the page layout adjusts to their
preferences.
Fixed Width
A fixed width layout (sometimes called a
static
layout) has its overall page width declared in an absolute
unit of measure, usually pixels, and that width stays the same regardless of the size of the browser
window. This is appealing to many designers because it affords them more control over how elements line
up and how they fit within the page space.
To be honest, fixed width layouts are also easier to build. That may be the real reason they're so common
and popular. A fixed layout is rigid and predictable—a pixel is always a pixel. You can set all your widths,
padding, and margins in pixels and know they won't shift at the whim of the user. It eliminates one more
variable from the complicated job of designing a website with CSS.
But a fixed width doesn't allow for a browser window that's narrower than the design, forcing part of the
page to run off to one side, obscuring valuable content and causing the dreaded horizontal scroll bar
(perhaps more properly called a
crawl bar
). Users with narrow windows have to drag the bar to the left or
right to see all the content. On the other hand, narrow fixed layouts intended for small screens can waste a
