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.

Coda code editor

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).

Screenshot of 'A List Apart' home page

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.

Screenshot of 'HTML Dog' home page

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.

Screenshot of 'Simple Bits' home page

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.

Fixed-width layout with fluid background

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.

Screenshot of 'We Are Sofa' home page

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.

YouTube Layouts Group

Summary

Fixed-width, fluid/liquid, elastic, and hybrid layouts each offer a solution to different problems designing for the web.

Multiple devices, browsers, and resolutions make control over a design more difficult. Too much control takes away flexibility from your audience.

Of the four fixed-width is probably the most common due to its predicability and ease of development. It’s how I’ve built most sites over the years and perhaps how you have as well. Personally I’ve never cared for fluid layouts as they seem to cause more problems than they solve.

Fixed and fluid will probably give way to elastic and hybrid layouts as the latter two are able to keep most of the pros of the former, while minimizing some of their cons. Though more complicated than their counterparts they each is worth the effort when time and budget allow.

Next time we’ll look at the other 2 layouts, responsive, and fluid/elastic grids. The later is less of an overall layout and more something you would add to fluid or elastic layouts to remove some of the cons of each.

I’ll also add some additional thoughts on when you might decide to use each layout.

Download a free sample from my book, Design Fundamentals.

15 comments

  1. Thanks so much for this list of all different CSS layouts. So far I have worked with a few different ones but I really want to give a few others a try. I find that a fixed width layout limits my website designs at times.

    • I hear you Jason. Most sites I’ve developed have been fixed width and while that layout offers great control over a design it can be limiting.

      I’ve never been a fan of fully fluid layouts. They tend to just become a bunch of stuff on a page with little design to them. At least the ones I’ve seen or attempted.

      The hybrid approach can be nice, especially as there’s some variety in how you go about creating a hybrid design. I also think there’s something logical about elastic designs as the whole design comes out of something internal to the design.

  2. You have covered this pretty well. Except…I believe you are incomplete in the way you have summed up Fluid/Elastic

    Several years ago, I developed a template that I call the “fluid capped width” This uses the max-width, but it also caters for browsers like IE6 that require the jscript expression to limit widths.

    These two combined will keep the page at a capped width, no problem. So non of your “cons” apply at all when you do that.

    The original template was developed using tables for the page structure, but it can be applied just as easily to a full css layout.

    • I certainly wasn’t trying to be all encompassing in this post so I won’t claim to have given complete details about any of these layouts.

      It also depends on how you’re defining the fluid/elastic hybrid layout. I’m only talking about one specific type of hybrid layout here and know there are many variations on the same layout.

      Feel free to post a link to your template. I’d be interested in seeing it.

      • I hope my comment didn’t come across as being critical. Now that I rad it again, perhaps it does, and I didn’t mean it that way. Sorry. I actually really enjoyed reading the article, and your stuff on sizing relative to within the content rather than the viewport was very interesting.

        Well, here is a site that I found using the template (note, Im not connected with the site in any way, nor did I build it…it just happens to be one that is using an earlier version of the template).

        http://www.motorcycle-accessories-wiseguy.com/index.html

        You will see that it will expand/contract correctly, even with IE6. Easy enough for you to look at the source code and stylesheet to see how that works.

        • Funny AJ. I didn’t take your comment as bring critical at all. I replied late at night and probably wasn’t as awake and coherent as I should have been. :)

          Thanks for the link. I’ll take a look at how the design works and how the code is set up. I appreciate it.

  3. Steven, the article is a quite nice comparison of cons and pros of the CSS layout patterns, thanks for sharing your view.
    Taking into account the growing number of people surfing the web, using mobiles, tablets and netbooks, a website should be designed and developed responsive or at least have its mobile version available.
    I found the skeleton, 960gs and also the bootstrap very handy and professional frameworks.
    It’ll be nice to hear your opinion about the ones mentioned.

    • Thanks. I’m glad you enjoyed the article.

      I haven’t used any of the frameworks you’ve mentioned. I tend to be the kind of person to roll my own framework. As far as I know 960gs isn’t responsive. I’ve seen good things said about both skeleton and bootstrap and have debated writing posts about both them at some point.

      I’m not familiar enough with either at the moment to offer an opinion. Maybe I should dig into them a little more to see what I think.

Leave a Reply

Your email address will not be published.

css.php