Working with Fixed Width, Fluid Width and Elastic Widths.

The aim of this CSS tutorial is to demonstrate the three main units of measurement and the reasons one would be more usable than the other for presentation.

FIXED WIDTH: Pixels

Pixel values to define the presentation of elements is the main characteristic of a fixed width site. Websites that conform to fixed widths for their main containers (i.e. 980 pixels wide) and the users with various browser sizes who use them, are stuck with an immovable width irrespective of the user's browser size. The reason fixed widths are used are to exert the most control over the presentation of elements. The cons of a fixed width site is that readability suffers when text is resized, and with the trend for larger monitors and screen sizes, the conventions used today to determine an optimal fixed width for 90% of browsers will become outdated in time. The consequence is ever increasing space to the left and right margins of fixed width sites as browser screen sizes increase.

This is a FIXED box

Pixels define the box size.

This box width is not inteded to be resizable when you minimize the size of the browser window.

This box will maintain its proportion irrespective of any browser manipulation.

ELASTIC WIDTH: Ems

Em values to define the presentation of elements is the main characteristic of an elastic width site. Websites that conform to elastic layouts are expandable and proportionate by nature. Similar to fixed widths, the proportions of an elastic layout will remain unchanged on browser resizes. However, as the text size is increased, the sections measured in ems will increase in size as well.

This is an ELASTIC box.
em values define the box size.
By pressing Ctrl and + you will see how all properties within the box increase and decrease like a zoom-in feature.
The text barely wraps or loses any integrity.

FLUID WIDTH: %

Percentage values to define the presentation of elements is the main characteristic of a fluid width site. Websites that conform to percentage widths utilize as much browser real estate above the fold as possible, which in laymans terms, is optimized for any browser (whether 640x480 or 1440x900) to display as much content in the visible portion of the web browser display area as possible. A usability problem associated with fluid widths is that floated elements can jump around and clear to another line when browser screens are minimized, ruining the flow.

This is a FLUID box floated across the entire screen.
Percentage defines the box size.
Percentages force words to wrap as the browser window is contracted.
This slowly shows the background pattern in the styles properties of the box.
Because the DIV is lower in the body of the document and cleared on both sides, this box will appear underneath the other boxes on the screen.
There is no loss of box visibility.
Both margins are maintained.

Click on the links in this paragraph for a nice tutorial to follow up on these fixed, fluid and elastic CSS layouts