Pros And Cons Of 6 CSS Layout Patterns: Part 1

There are a number of css layout patterns you can use when developing a website. Your design could be of fixed-width or it could be fluid or elastic. It might even be a hybrid layout or be responsive to different devices.
What are the pros and cons of some of the common css layouts available to us? Are some layouts preferred over others?

Note: While you can’t always tell from the screenshots throughout this post I’ve tried to match the screenshot with the layout described below it. You can click through on any of the images to see the site in question and then resize your browser of font size to see how the layouts react.

6 CSS Layouts

You’re likely familiar with all of the css layouts below, but to make sure we’re on the same page, let’s quickly define each.

• Fixed-Width — Overall width is fixed with absolute measurements (px). They’re a solution to the lack of control designing for the web.
• Fluid/Liquid — Overall width is set in proportion to the browser window (%). They’re a solution to multiple resolutions.
• Elastic — Overall width is set in proportion to some design element, usually font-size (em). They’re a solution to the control issues with fluid designs
• Hybrid — Using a combination of fixed and either fluid or elastic design elements. They’re a solution to the cons of all 3 layouts above.
• Responsive — Using different stylesheets based on possible ranges of widths of the audience. They’re a solution to the multiple devices and resolutions of our audience.
• Fluid/Elastic Grids — A type of elastic layout that makes use of a grid. They’re a solution to maintaining order inside a dynamic container.

Pay attention to the difference between fluid/liquid layouts and elastic layouts. In both widths are measured relatively.
The difference is that fluid layouts are measured relative to something external to the design (browser window), while elastic layouts are measured relative to something internal to the design (font-size).

Fixed-Width Layouts

Fixed-width layouts are static. Based on some data about your audience’s resolution you design for an optimum width.
Typically you center the design to split the external whitespace for large resolution browsers. The overall width might be based on either internal or external things.
Fixed-width layouts are probably the most common layouts you see online today.
Pros:

• Greater control over the placement and display of elements
• More predictable as the layout doesn’t change when the browser is resized
• Simplest, quickest and least expensive to develop due to their static nature
• Everything can be pre-designed to pixel perfection
• Exact sizes are always maintained

Cons:

• Doesn’t take advantage of space in browser window
• Doesn’t take advantage of the flexible nature of the web
• Can lead to excessive external whitespace at large resolutions
• Designed for an average visitor and not ideal for all visitors
• Removes some freedom from users
• Horizontal scrollbars may appear at lower resolution

Control and cost are the main reasons fixed-width layouts are so popular.
They would also naturally appeal to anyone moving to the web after experience with print design as a fixed-width is a given condition in print.

Fluid or Liquid Layouts

Fluid layouts are usually created by setting the body to be 100% of the width of the available window and then have all other measurements expressed in some % of the body width.
The width of the design is then adjustable by adjusting the width of your browser.
All dimensions in a liquid or fluid layout are relative to the browser window. Proportion is retained with respect to browser size.
Pros:

• Resizable for visitors
• Takes advantage of edge space in browser window
• Gives back some resizing freedom to usrs.
• Horizontal scrollbars don’t appear

Cons:

• Loss of control over placement and display of some design elements
• Less predictable how design will be seen
• More difficult to develop well
• Less control over internal whitespace within and between elements
• Sometimes uses min and max widths, which are not understood by some browsers

Fluid layouts solve some of the problems of fixed layouts creating new problems as they do.
The loss of control can be designed for to a point. For example the measure of a line of text in fluid designs often grow too wide to be comfortably read.
The solution is to give those areas a max-width or to somehow constrain widths in the design, which takes us back toward a fixed width-layout to some degree.

Elastic Layouts

Elastic layouts are similar to fluid layouts with one important difference. The measurements in elastic layouts are relative to some internal part of the design, usually the font-size of the main copy.
The ‘em’ is typically the unit of measurement in elastic designs, though % are mixed in where appropriate.
Pros:

• Generally keeps pros of both fluid and fixed designs
• Greater control than fluid designs
• Dimensions are based on internal design elements

Cons:

• More complicated to develop as more math needed
• Images and media may not be optimized for their resulting size
• May be superfluous with browser full-page zoom
• May not take advatnage of complete browser window

Elastic layouts tend to look like fixed-width layouts with the ability to change dimensions based usually on the size of the font. This makes a lot of sense from a design standpoint as it offers control where necessary and flexibility where it makes sense.
Proportions are always maintained to something internal and so the design can better maintain unity. At the same time visitors can make adjustments to help them interact with the design.

Hybrid Layouts

As the name implies hybrid layouts are a mix of fixed, fluid, and elastic design elements.
By selectively deciding which areas of your design should be static and which should be flexible you can reign in some of the problems of all three types of layouts.

Fixed-Width with Fluid Background

These layouts are mainly fixed, but allow their backgrounds to stretch to the edges of the browser window. This gives the design an initial impression of being fluid, while still maintaining control over the design.
Another common approach with this layout is to allow header, footer, or both to be fluid while keeping main content and sidebars fixed.
Pros:

• Maintains control and other benefits of fixed-width layouts
• Gives the appearance of being fluid, creating interest over the enitre browser window

Cons:

• Fluidity is mostly illusion
• Keeps many of the cons of fixed-width layouts

Fixed-width, fluid background designs maintain control over most of the design, while allowing some parts of the design to be fluid in order to make the complete design seem more flexible.

Fluid/Elastic

Fluid/elastic layouts make use of min and max widths in order to allow flexibility while still having some final control over the design.
You allow your design to scale up or down, but only within set ranges of values that you define with min and max widths.
Pros:

• Allows fluidity to a point
• Gives greater control than fully fluid designs
• Can keep content areas and font sizes from becoming too large or small
• Prevents problems at end points, by removing those endpoints

Cons:

• Requires assumptions about audience screen resolutions
• Requires min and max properties not available on some older browsers
• Requires some kind of browser detection and multiple stylesheets

Overall hybrid layouts seek to keep the benefits of fluid or elastic layouts while minimizing some of their downsides such as a complete loss of control over design elements.
Hybrid designs give up control where it’s less important to maintain in order to have greater control where it’s more important to maintain.