How To Develop Elastic Grid Layouts In CSS

Flexible layouts are created by using relative measurements as opposed to absolute measurements. The question is relative to what? With elastic layouts the measurements are set relative to something internal to the design, usually the size of the type.

Design and the elastic mind

We previously talked about fluid layouts, which I defined as using measurements relative to the browser window. Moving from a fluid layout to an elastic layout is actually quite simple. In fact we only need to make one change to the css we previously used to make the layout change.

Before getting to the code let me say the definitions above aren’t necessarily used by all. When people talk about fluid layouts they sometimes mean any flexible layout. I’m defining things as:

  • Flexible layout — any layout that uses relative measurements to allow the layout to resize under different conditions
  • Fluid layouts — layouts with measurements relative to the browser window
  • Elastic layouts — layouts with measurements relative to something internal to the design such as the size of the type

Both fluid and elastic layouts are flexible. Again not everyone would define these layouts this way. All three terms are often used to describe any layout that resizes itself.

As always if you prefer to skip the explanations below and jump right to the code you can view the demo layouts here.

2 column elastic layout

The HTML

If you’ve been following along with this series of posts on creating css layouts this html should be old hat by now.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<div id="container">

    <div id="header">
        <p>Header</p>
    </div>
    
    <div id="content">
        <p>Main content</p>
    </div>
    
    <div id="sidebar">
        <p>Sidebar</p>
    </div>
    
    <div id="footer">
        <p>Footer</p>
    </div>
    
</div>

The only difference between what’s here and what we previously saw with the fluid layouts is the addition of the container div.

You can alternately use the body tag as the container. I’m using a dedicated container div as it’s been my practice and I’m unaware of any real advantages in using one method over the other.

3 column elastic layout

The CSS

Most of this css should also be familiar by now. In fact part of the reason for this series of posts has been to let you see how similar and simple the code is for these different types of layouts.

In many ways this is the beauty of css. A few small changes in the code can have a significant impact on how the html structure is presented.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
body {font-size: 1em}

#container {max-width: 75em; margin: 0 auto;}

#content {
    float:left;
    width:67%;
}

#sidebar {
    float:left;
    width:33%;
}

#footer {
    clear:both;
}

The only real difference here as compared to our fluid layouts is that we set the width of #container. Remember in the fluid layouts we used the body as the container.

In the fluid layouts we allowed the width of the body to be 100% of the browser width. Here I’ve set the max-width of #container to be 75em.

We’ve given the body a font-size of 1em, which will default to 16px in most browsers, so 75em is equal to 16 x 75 or 1200px.

I’m using max-width as opposed to width since it’s more flexible. This allows the layout to resize when the browser is open less than 1200px wide. Had we used width instead we’d see a horizontal scroll bar when the browser is open less then 1200px.

Everything else is the same as when we developed a fluid layout however that one small change to the width of the container changes what we’re measuring against.

If we continue deeper into the layout the width of the content is 67%. That 67% is measured against it’s parent, which is #container. #container is relative to the font-size and so #content is relative to the font-size too. Similar for #sidebar.

Elastic band

Elastic Grids

A couple of years ago Ethan Marcotte wrote an article for A List Apart on Fluid Grids. What Ethan referred to as fluid I’m calling elastic. I think Ethan now uses the more generic flexible grids.

Without getting into developing grids here, the basic idea for making grids elastic is to switch from using absolute measurements to using relative measurements like we’ve done above.

When setting up different grids it’s usually easier to think in terms of absolute measurements. Ethan offered a simple formula for then converting those measurements into relative ones to create the flexible grid.

target ÷ context = result

This is what we did above when we set the max-width on the container. Our result was 75em. Out target was 1200px. Our context was the 1em (or 16px) we set for the font-size of the body.

1200 (target) ÷ 16 (context) = 75 (result)

When we set widths on the content and sidebar divs our results are 67% and 33% respectively. While I didn’t show it here the targets were maximum widths of 800px and 400px.

800 ÷ 1200 × 100% = 67%

400 ÷ 1200 × 100% = 33%

The context for both was the width of the container div. When we set widths in % they’re relative to the width of the parent element.

Sounds relatively simple (no pun intended), but there’s a potential gotcha waiting.

If we specify any width in ‘em’ then the context is the font-size of that element. Above we specified #container in ‘em’ but since the font-size of the container is the same as the font-size of the body (its parent) there wasn’t a problem.

Had we changed the font-size of container to be 1.25 em (20px) then 75em would translate to a new measurement.

20 × 75 = 1500 = 16 × 75 × 1.25

You can play with the code and test this by changing the font-size on different divs to see what happens.

In the cases of #content and #sidebar where we set the width in % changing the font-size on either div won’t change anything (other than the font-size).

The context will still be the width of the parent as we’re using % for the measurement. For this reason I think it makes more sense to define your widths using %. Save ‘em’ for font-sizes, line-heights, and anything else vertical.

Again you can test this and see what happens.

As long as you remain aware of any changes in your context this shouldn’t cause any problems. However if you find your layout not looking right, this context change is probably a good place to start investigating why.

Ball of yellow and blue rubber bands

Summary

Developing flexible layouts with relative measurements should be a goal for web design as the format in which our designs live (the browser) will always be flexible.

Those measurements can be relative to the browser, which I’ve defined as fluid layouts or relative to something internal to the design, which I’ve defined as elastic layouts.

The names aren’t specifically important, but the concept is. It makes more sense to use measurements relative to something internal in the design.

It’s quite simple to move from a fluid layout to an elastic one. All it takes is changing the measurement of the outermost container from % to ‘em.’ Everything inside that container will then be relative to the design instead of the browser window. Inner containers can continue to be measured in %.

Taking it further and creating elastic grids we’ll use these same measurements. With some not too difficult math we can create grids that resize themselves as the text resizes.

If we also use max-widths in places instead of widths we have a layout that can resize itself as the browser resizes.

We’re almost done with this series of posts on css layouts. Next week we’ll consider flexible images and the following week we’ll look at media queries while we build toward a discussion of responsive layouts.

Download a free sample from my book, Design Fundamentals.

8 comments

  1. I think it is better to default your font-sizes down so that 1em is equal to 10px then it is easier to work out your layout and other font sizes. Setting font-size: 100% on the html element then setting it again to 62.5% on the body element will default 1em to 10px. Also maybe set your container div to have a width of 960px and a max-width of 1200px as it makes your layout alot more flexible.

    • Taking the font down to 10px is definitely something that’s commonly done. It certainly makes some of the math easier. :)

      I don’t think setting both width and max-width in px would make the layout more flexible. By setting them to absolute measurements you make the layout less flexible if anything.

      • Hi Steven,

        Totally agree, i dont know what possesed me to write that … total mistake.

        What i was meant to say is to have a max-width set in em’s e.g. 75em and have a width in a percentage based measurement e.g. 94%.

        I came across the technique on Trent Walton’s Blog and found it very interesting.

        http://trentwalton.com/

        • Oh, got’cha. That’s an interesting technique. I’ll have to try it and see how it works. Do you which of Trent’s posts he mentions it?

          If not I can find it, but if you have a link directly to the post it would be appreciated.

          From the look of the code I think it’s setting the width so it defaults to a relative size of your choosing. The way I’m doing it here you don’t have that default. Your default size would either be the max-width if your browser is open larger or the full screen if your browser is open smaller.

    • Thanks Steve and I agree about Ethan’s book. I bought it a couple hours after it was out and read it last week. I have posts on flexible images and media queries coming and in both I link to the new book as well as Ethan’s posts on the subject.

      Ethan deserves all the credit where responsive design is concerned.

  2. I noticed using total sum of 100% in multiple columns (33+67%) will break layout in IE, and sometimes when you zoom in firefox. That’s annoying.

    • Is it possible there were left and/or right paddings set on the columns? That would throw off IE which would add the padding value to the total causing it to be over 100%.

      My guess is something inside the columns, whether it’s padding or something else is forcing the total width to be larger than 100%

Leave a Reply

Your email address will not be published.

css.php