11 IE rounding fix

Up until now I hadn’t got round to trying this for myself. Somehow getting from default fontsize in browsers to defining the width on divs is a hard one to make for me. Thanks for explaining it clearly in this very valuable article.

As for rounding errors in IE. I’ve had success with using a -1px margin to sort this, adding an extra pixel every 2nd column or so. ymmv

posted at 07:52 am on March 3, 2009 by Matijs Brinkhuis

12 Information

Like other people, my worry is dealing with fixed-width elements in a fluid design.
I haven’t put much thought to it, but I’d be happy to hear about resources dealing with that issue. So if anyone has links to suggest, I’d be grateful.

Mikael

posted at 07:53 am on March 3, 2009 by Mikael G

13 Superb

This is a superbly-written, clear, concise article. I doff my hat in your general direction, Ethan.

I’m glad to see that tiresome debates about the relative merits of fixed/elastic/liquid are dying off and being replaced with practical tutorials on how to implement whatever method you have decided is best for your users.

For more dogma-free, hands-on practical advice, I highly recommend the book Flexible Web Design: Creating Liquid and Elastic Layouts with CSS by Zoe Mickley Gillenwater, published by New Riders.

http://www.flexiblewebbook.com/

posted at 08:25 am on March 3, 2009 by Jeremy Keith

14

Ethan,

Great article and technique, thanks! This is the kind of thing that I’ve thought would be a good idea for ages, but never got around to working out the mechanics.

Wouldn’t SVG be the perfect partner to this technique? Has anyone had any success with using (non-Flash) scalable vector graphics in a fluid grid like this?

posted at 08:25 am on March 3, 2009 by Jonathan Kahn

15 Do you talk about Emastic?

Almost one year ago I created totally em based CSS Framework called Emastic. With fixed and Fluid columns. I think this article totally describes [url=“http://code.google.com/p/emastic/”]Emastic CSS Framework[/url]

posted at 08:51 am on March 3, 2009 by Vladimir Carrer

16 Untitled

The term ‘fluid’ threw me off. I don’t think the grid or layout is fluid, but flexible. In my happy little world, fluid means that the content reorders itself with the width of the page, as in using floats.

What is happening here is that the width of a grid element resizes with the screenestate, but the position of the container is fixed on the grid. The YAML examples demonstrate that perfectly.

It does not solve the everlasting problem: you want to present your content based upon the width of readable space of a device your content is presented upon, may it be a 30” screen or a 7” screen.

The cleverest trick I ever saw was a javascript switch that presented another layout depending on the size of the screen the javascript somehow detected. Not ideal either, but at least it reorders content for small screens while keeping the content readable en not presenting scrollbars.

However, flexible grids are welcome too, especially when you want to give users the opportunity to textzoom.

posted at 11:09 am on March 3, 2009 by Martijn ten Napel

17 Base font-size 16?

A lot of your initial calculations come from the assumption that the browser’s default stylesheet font-size “which in most cases is 16px”. What happens for browsers where this isn’t the case?
Is there any reason you use % for width, but em for font-size? YUI CSS suggests that font-sizes are better declared with “percentages as the units because they render more consistently than ems” (can’t find what evidence they base that on). You may need a body{width: 100%;} like you have done with the font-size, but otherwise, what am I missing?

posted at 12:15 pm on March 3, 2009 by Gary Jones

18 CSS option

Media Queries can give you a different layout depending on the screen size.

posted at 12:35 pm on March 3, 2009 by Chris Hester

19 Typographic Problems With Fluid Layouts

While this is all nice and fancy and new, I think it does break some very basic typographic rules, and some minor tweaks might need to be introduced.

First, text is easiest to read at a certain font size, certain leading, certain number of words per line with a certain amount of white space surrounding the text. I believe this is the main reason fixed width layouts remain dominant. A purely fluid layout, like the one demonstrated in this article, does not give the reader a consistent line length to font size to leading to white space ratio. As the screen resolution changes, the number of words per line decreases, as does the white space surrounding the text. I see no problem with setting a minimum width for body text — in fact setting a fixed width for body text — for this very reason.

This certainly doesn’t negate the content of this article, but merely points out a few design or readability issues that need to be addressed for all fluid designs in general. Gives me something to play around with.

posted at 12:46 pm on March 3, 2009 by Greg Burghardt