Discuss: Fluid Grids

by Ethan Marcotte

21 Good and bad.

I liked this article a lot. I have been using em sized grid based layouts for about 6 months now. With a little creativity and a clever use of floats you will never need to scroll horizontally to read content at any text size. There are just so many benefits that it seems odd not to do it.

One problem though, with so many references in this article to IE6, I’m surprised at how much of your CSS contains widths, margins and padding on the same element. Guaranteed to break as we all know that IE6 has some crazy ideas regarding the box model.

Extremely informative article otherwise.

posted at 01:51 pm on March 3, 2009 by Christopher Bolton

22 Adding Complexity

I enjoyed the article and the simple math equation you present is a great, easy to remember device for determining em values.

The problem I have with implementing this type of solution, however, (and this goes for a lot of the frameworks I’ve seen) is that the final example works until you want to add borders and adjust margin settings to gain greater control over the white space and gutters in a layout. For example, adding a 7 pixel border to .main in this article’s example forces the .meta div to drop, ruining the layout. Since an element’s width is computed using not just the CSS width property, but also margins, padding, border, how do you implement a flexible grid like this while also controlling other properties that affect an element’s width?

posted at 03:00 pm on March 3, 2009 by Dave McFarland

23 Grid Obsessed

This is great stuff. As someone who is obsessed with grids and enjoys learning more about how to use them for design and implementation, this article and all of the comments here are awesome. Thanks everyone.

posted at 03:46 pm on March 3, 2009 by Taylor Regan

24

Greg, thanks for the comments. You’re exactly right: some typographic details may shift as the design changes in width. However, I’d suggest that a fixed width design penalizes users on smaller resolution devices, which is trading one set of legibility issues for another.

Instead, my preference would be to start with a fluid grid, and then use some resolution-sensitive JavaScript to tweak the typography accordingly. Auto line-height is a promising-looking jQuery plugin I’ve found, but that kind of functionality could easily be replicated outside of that framework.

Christopher , I’m not seeing any issues in IE6, and I tested the sample pages pretty thoroughly before publication. In general, as long as you avoid some of the common CSS bugs in that browser (e.g., doubled float margins ), IE6 should play pretty nicely. But do let me know if you’re encountering any errors.

Dave , that’s one of the sticking points of using floats for layouts. My sample markup was pretty bare; in a production template, there might be some additional markup for the CSS to hook into.

posted at 04:23 pm on March 3, 2009 by Ethan Marcotte

25 Thanks but could be more laconic

The topic is quite important and it’s good that someone has written on that.

So many thanks to the author.

However, the same ideas could be expressed in a couple of paragraphs.

All that introduction about using em-s for text and much of the rest could be omitted, taking into account how well-known this ideas are. You could simply give a link about em-s and other stuff for those, who don’t know.
It would save both your and the readers’ time.

Still, many thanks.

posted at 05:15 pm on March 3, 2009 by Sandro Tarkhan-Mouravi

26

Sandro :

Noted.

;)

posted at 06:07 pm on March 3, 2009 by Ethan Marcotte

27 Thanks for the oblique mention!

Ethan, great article.

Thanks for the resources, and the detailed description.

(I’m the one who “pointed out the Fluid 960 Grid System.”)

posted at 06:14 pm on March 3, 2009 by Michael Montgomery

28 I guess I need to use fore-thought...

Ethan, I think you did a great job of explaining HOW to use ems and percentages to create such a fluid layout, as well as WHY it is important to do so.

My problem is that my detail-oriented mind doesn’t work that way mathematically. I am all visual.

I guess now I can do the math if I get out a calculator and am constantly considerate of the values of my parent elements now that you’ve explained it, though.

Congratulations, you duped me into learning something useful because the language you used in the synopsis was funny.

I guess my users should thank you.

;)

posted at 07:42 pm on March 3, 2009 by Chris Meeks

29 Converting to EMs

PXtoEM.com will allow you to convert between PX and EM easily!

posted at 07:51 pm on March 3, 2009 by Brian Cray

30 finally!

Thats brilliant! Ive always wondered how people came to these really precise measurements. 8.235128463874em always seemed to work but not 8.23512846387 (thats an exaggeration obviously…) all those years doing ratios will come in handy after all!

as somebody that watches complete idiots using computers on a regular basis i constantly see people with only internet explorer open but in a window taking up a quarter of the screen watching them scroll left right up down. it amuses me no end…

posted at 08:13 pm on March 3, 2009 by Andy Mo