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 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.
- 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
- 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.
- Resizable for visitors
- Takes advantage of edge space in browser window
- Gives back some resizing freedom to usrs.
- Horizontal scrollbars don’t appear
- 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 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.
- Generally keeps pros of both fluid and fixed designs
- Greater control than fluid designs
- Dimensions are based on internal design elements
- 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.
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.
- Maintains control and other benefits of fixed-width layouts
- Gives the appearance of being fluid, creating interest over the enitre browser window
- 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 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.
- 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
- 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.
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.