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