Stubbornella also forced me to consider removing gutters from units. I would like to follow the OOCSS design principles as much as possible, but I may have to make a compromise for the sake of designer sanity. I had envisioned providing a .gr.gr-m (a “Grid” with a margin “Grid Style” applied to it) as a class providing sane margin/gutter defaults (if such a thing exists) on grids, based on design theory if I can find enough theory to support specific algebra, and derivative classes to either add or remove margins/gutters if the designer wants more or less. I’m not really sure where I’m going to end up with this idea, but I would really like to ease the burden of whitespacing grids and units if possible.

Robert, did you ever finish the CSS library you discuss in this blog entry? I am curious to see what you have come up with.

Check it out now. The file size is even smaller, no gutters, and the lastUnit takes all remaining space, even in IE5.5 and 6! I’m so pleased. Position relative on the lastUnit was the key.

The only caveat now is that content being wider than the grid itself can cause a wrap. For example an extra long word at really narrow widths. In my tests it works perfectly for all normal scenarios.

The IE5.5 support is really key, because quirksmode in later versions of IE is much more like 5.5.

http://github.com/stubbornella/oocss/blob/3f0b8664446ee1f911d91370945cf948581ba484/css/grids.css

Let me know if you manage to break anything, good use cases are always welcome!

Cheers,
Nicole

I wrestled with this issue for a couple of sleepless nights back then. Here were the results of my own research:

1) There’s no way around the issue without feeding IE lesser values.
2) The more columns you have, the lower the value needs to be, making it pretty obscene if you have enough columns (I was shooting for a 12-column grid because of how divisible it is).

I, for one, like the gutters on the grid level, so if you had a solution with gutters I’d personally be interested in it. So far of all the CSS grids I’ve seen I’ve liked your fledgling one best, and am interested in building off it and extending it if I don’t end up rolling my own.

I saw your tweet re: IE rounding errors. I hadn’t capitalized the “lastUnit” class name in the AG test grids. Oops.

Thanks for the link to this article. I resolved the problem for better browsers (IE7+, FF, Safari, Chrome) by having no set width on the last unit in any row. This means that the last unit absorbs the subtle rounding differences between those browsers. overflow:hidden is the trick, if you read the spec it is a subtle effect of this property when no height is specified.

On the other hand, IE6. My grids used to have gutters. I recently removed them, because I felt it was important that gutters live on content objects rather than grids. I used the gutter to help IE6 by floating the last unit right. That meant that between the last two units an ~10px gap absorbed the rounding errors in IE6. Ultimately, I need a way to tell IE6 that the last unit should be all the rest of the space on the line, whatever that might be. Removing the width causes the calculation to be content dependent and, like you’ve talked about above, having a width causes (at some resolution or another) the unit to wrap.

I really don’t want to put gutters back in the grids (though they worked very well and were well tested with gutters)… so I’m searching for a solution. I’ve documented the bug here:
http://stubbornella.lighthouseapp.com/projects/26663-object-oriented-css/tickets/1-arnaud-gueras-test-wrapping-on-ie#ticket-1-4

Thanks again for your feedback,
Nicole

Cool enough; whatever gets the job done for you! I’m a JS junkie myself. I was indeed quite surprised to see that resizing video with the rounded-up widths; I knew I didn’t like using CSS width percentages as a production-ready layout solution, but I didn’t know I had that much reason to stay away. Ouch!

Kick ass post, by the way, thanks.