Fluid vs. Fixed Layouts

There's no right or wrong choice.  Typically, if you have a site that uses a lot of Web 2.0 or contains short blocks of text then implement a fluid design.   If you have a site with a long blocks of text, like a blog site, then go toward a fixed width design.

Fixed
Fixed designs define the width on the page, regardless of the browser window size.   A normal fixed layout has containers, images and other elements defined in pixel widths.  Some popular sites using fixed designs are Yahoo!, CNN and BBC News.

The advantage of fixed layouts is it gives the designer complete control over the design including the use of background images.  The faults of fixed design is that the design will look different depending on the user's platform.   Fixed layouts can create white space, or wasted space, for users with large screens and resolutions.  For users with smaller screens and resolutions the design will spill out of the window creating thus creating a bad user experience with the dreaded scroll bar.

e.g.

<style>
#doc {
    margin:auto; /* center in window */
    width: 970px; /* fixed page width */
}
</style>

Fluid
Fluid design allows the user to decide how the page looks based upon the size of their browser window and display settings.  The page fills up the entire available space.  Examples of fluid designs are Google, Wikipedia and Delicious.  A fluid layout has a container that fills 100% of the entire available space.  Within the layout widths of containers, images and other elements are defined in ems or percentages.

The advantage of using a fluid layout is the layout is adaptive and all the space on the page is used.  The disadvantage of using a fluid layout is it requires increased testing and not being able to use background images can limit the creativity of the website.

e.g.

<div class="container" id="layout">
    <div class="container" id="column1"></div>
    <div class="container" id="MainColumn"></div>
    <div class="container" id="column2"></div>
</div>

<style>
#layout {
    padding-left:300px; /* "left col" width */
    padding-right:150px; /* "right col" width */
}

#column1 {
    margin-left:-300px; /* "left col" width */
    width:300px;
}

#column2 {
    width:150px;
    margin-right:-150px; /* "right col" width */
}

#MainColumn {
    width:100%;
}
</style>