CSS Design - Fixed, Fluid or Elastic Design

Among designers, there is an ongoing debate about which cascading style sheets (CSS) layout works best - fixed, fluid or elastic. While some believe that fluid is more accessible, others believe the inherent drawbacks of fluid CSS overshadow the benefits. There remain no clear answers as to which works best across the board, so as in most things, finding what you are most comfortable with and listening to the feedback of your users should be the deciding factors - when it comes to successful websites, easy usability and equal accessibility usually rules the day. So, if you're planning a new website or a redesign of an existing site, it's helpful to have a little background on each of these styles to discuss with your Web designer.

Cascading style sheets are files that separate design elements into a distinct presentation layer. Pretty simple right? It is simple, but choosing a layout - fixed, fluid or elastic can be a challenge. Let's define each and set forth their advantages and disadvantages.


Fixed Width Layouts

A fixed-width site is one that the width of the entire page is set with a specific numerical value. The width is immovable and independent of the browser's display resolution, meaning that designers have more control over how a final page will render.

Advantages: Readable content areas are tightly controlled without having to set minimum-maximum width and are sometimes easier to style - some designs can only achieve their visual point from fixed width layouts.

Disadvantages: The line-width to text-size ratio doesn't increase with text resizing which presents a problem when text size is increased by the user. Smaller monitors force horizontal scroll bars to appear, and such layouts prevent multiple
columns and thus content.


Fluid or Liquid Layouts

With fluid or liquid layouts, the width of the page is flexible and therefore dependent on the width of a user's monitor. Designers do not have to specify a wrapper width or use a percentage unit of measure. The result is that a very efficient use of space is created and is optimal if limited room is available.

Advantages: Can work with virtually any screen view, making it a more universal solution. Fluid layouts match a browser's default layout method and make the most of existing screen real estate.

Disadvantages: Fluid designs provide for more white space which, if you have a prolific writer on hand and believe in long copy pages, can result in congested designs.


Elastic Layouts

An elastic site's elements (the main wrapper for example) are measured using ems that are relative proportionally to the text or font size. The result is that as text size is increases, sections measured in ems will increase in size also.

Advantages: Everything in an elastic layout resizes at the same rate. This means that no page components will get out of proportion. Nothing looks better and is more accessible than an elastic layout.

Disadvantages: Horizontal scroll bars could appear in an elastic layout if the sizing is too large. Calculation can prove to be complicated and CSS does not have the ability to have functions and conversions. Flexible images usually require more work.

It's clear that fixed, fluid and elastic layout methods have their own unique advantages and disadvantages. But with a little forethought, any of these methods will work well when creating a site which meets accessibility and usability standards. The key is determining the needs and habits of your users and which style works best for your particular website.