Fluid Layout Design

Demo starter files

So far almost all of the layouts that we've built have been "fixed". Unlike print however, we are well aware that our medium - the web - is anything but a fixed size.

Rather than setting sizes and spacing in rigid, pixel-based terms, fluid layouts (also called elastic, liquid, etc.) use relative units of measurement.

Layouts generally fall into one of two categories:

Fixed Layouts

  • "Rigid", pixel dimensions which are admittedly easier to work with. Sometimes necessary for portfolio sites and projects with a lot of media like photos and videos, since they often need fixed dimensions.
  • As a general rule, it's been determined that 960px is an ideal width for fixed layouts. 960px fits well on 1024x768 (a "classic" screen size), and it's easily divisible by 3, 4, 5, 6, 8, 10, 12, and 15. This makes building grid-based layouts very easy.
  • Problem: Smaller screens shrink the whole layout, or worse, use horizontal scrollbars. Conversely, on very large screens, there is an excess of wasted negative space.

Fluid Layouts

  • More complex than fixed layouts.
  • Use percentages and other relative units for sizing, so content can stretch and reflow depending on the size of the window or screen.
  • Everything can be defined relative to the body font size (though not everything necessarily has to be).
  • Bounds can be set using min-width and max-width.

Instead of using pixels, fluid layouts leverage relative units like % and em.

The default font size in all modern browsers is 16px. So in that case,
1em = 16px
2em = 32px
1.25em = 20px
and so on.

Ems are valid units of measurement for anything including margins, padding, widths, etc. This method yields strong control of spacing and proportions relative to the font size, which is often the majority of the page's content.

There's a catch. Ems are relative to their inherited font-size setting just like a percentage would be.

Consider this scenario:

<body>
  <div>
    <p>Some text</p>
  </div>
</body>

body {
  font-size: 16px;
}
div {
  font-size: 1.3em;
}
p {
  font-size: 1.3em;
}

Text inside <body> will be 16px, <div> text will be calculated to 20.8px, and "Some text" will be 27.04px... possibly not what you're expecting.

Using em in a CSS class for something like .larger could be beneficial - no matter what size the text is where you use .larger, it will be bigger than that text.

However, in the code above, if paragraphs are set to 0.8em, you'll end up with 80 percent of 130 percent of 16 pixels...

This isn't always a problem, but it can certainly get confusing!

The solution? Rems. The rem unit is always based on the root-element's font size (the html element). This is regardless of inherited font sizes or where elements are nested in the document.

In the example above, if <div> and <p> are both set to 1.3rem instead, they will both have the same font size of 20.8px.

So Which is Better?

It's a poor blanket statement to make, that fluid layouts are always superior to fixed layouts. Both have their place, depending on the project. However, fluid layouts are becoming far more common in today's web.

Fluid layouts are closely tied to media queries, which we'll talk about soon!

In this demo you'll notice that no base font-size is specified, meaning this whole template is based on the browser's default. This is mostly for illustrative purposes. Sometimes you'll want more control as the designer, although 16px is generally a (really) good starting point. And if a user has changed the browser's default setting, they've probably done it for a reason, so we should try to respect and accomodate that.

This demo uses ems and rems instead of px for all the major units, so everything is relative to the base font size. Margins and padding will increase/decrease automatically if the font size changes. Even border thickness will be relative to the font size, though you may want to stick to pixels for those, if you want a 1px border to stay that way no matter what size the layout is.

If it's not already obvious, one of the greatest things about layouts like this is that you can change the size of the entire web site's text, keeping everything in proportion, just by changing the base font size for the body.