This is actually an old version of danielmall.com. For the latest and greatest, check out the new site.
 

Fixed. Fluid. Elastic.

Just wanted to settle a quick misconception about the terminology concerning certain CSS layouts:

Fixed: a layout in which the dimensions (typically width) of a containing element stay constant.

Liquid/Fluid: a layout in which the dimensions (typically width) of a containing element change according to the size of the browser window.

Elastic: a layout in which the dimensions (typically width) of a containing element change according to the text size.

There. Glad that’s settled. Aren’t you?

Comments

Nathan Smith said:

Aw, so where does poor ol' Liquid fit in? :)

Posted on January 8, 2007 10:53 AM

Dan Mall said:

Ah, good point. I see liquid and fluid as the same. I've updated the post to reflect that. Agreed?

Posted on January 8, 2007 11:15 AM

Rob Weychert said:

What about a layout in which the width of a containing element is affected both by changing the text size and by resizing the browser window, a la 456 Berea St? The layout width expands and contract as the text resizes, but will not expand beyond the width of the browser window.

Posted on January 8, 2007 11:30 AM

Dan Mall said:

Great point, Rob. In fact, that very site was what inspired the discussion I had that spurned this post.

That layout is elastic with a max-width. At the end of his post-redesign article, Roger himself calls it “elastic width with concertina padding and a maximum width”. In my opinion, the deciding factor is the fact that his max-width is specified in ems. Since an em is a unit of measure based on the text-size, that makes me believe that it’s ultimately an elastic layout, although it contains a portion of fluid/liquid features.

Posted on January 8, 2007 12:09 PM

Rob L. said:

I think many developers think of liquid/fluid as meaning based on *percentages of the viewport*, because taking your definition literally, I could write three stylesheets with different fixed pixel widths, set the stylesheet based on viewport width via javascript, and call that a liquid layout. Would you? That doesn't really work for me, probably because of the words liquid and fluid themselves... lu

Posted on January 11, 2007 12:14 AM

Rob L. said:

I think many developers think of liquid/fluid as meaning based on *percentages of the viewport*, because taking your definition literally, I could write three stylesheets with different fixed pixel widths, set the active stylesheet based on viewport width, and call that a liquid layout. Would you? That doesn't really work for me, probably because of the words liquid and fluid themselves... liquids flow, they don't jump to multiple fixed widths :)

Maybe in 2007 we should popularize a term like "variable layout" instead.

Posted on January 11, 2007 12:16 AM

Dan Mall said:

@Rob L.: Interesting point. You made me scratch my head a bit. In that instance, I’d say it’s still a fixed layout. I guess I should amend my definition: liquid/fluid layouts change as the viewport changes. Your example illustrates a layout based on increments. There will still be a point where the viewport changes that the layout does not.

Taking that a step further, what if many increments are defined, so much so that everytime the viewport changes, so does the layout? Would I call that liquid? No, I’d call that a waste of time and probably recommend you do some research into liquid layouts. :)

Posted on January 11, 2007 01:15 PM

zeldman said:

Fine post, sir. Helpful!

Posted on January 16, 2007 02:03 PM

Paulo said:

Nice

Posted on February 9, 2007 09:43 AM

Sorry: comments are closed.