Fluid Grids

by Ethan Marcotte

81 Reader Comments

Back to the Article
  1. First off, kudos on a fantastic article: well written and informative.

    After reading your article, I’m still unsure of why a designer would employ this technique as framework, outside of a direct client request. I don’t really see “minimum screen resolution” as necessarily evil. Web designers are constantly presented with a range of cantankerous situations – fluid design is just another variable, and to be honest, I don’t think fluid websites are anymore future proof than there fixed width siblings. We change them every few years anyway. Furthermore, the web community has this unquenchable desire to fully accommodate the user at the expense of design; while I clearly understand the necessity of usability and accessibility, I’m not quite sure when it becomes too sanitized, and frankly boring. I think putting the control firmly in the hands of the user is a bad idea, and has been detrimental to the other design communities: think American automobile industry. I’m not against the idea, but I think it should be employed when the situation or design calls for it, not as a framework.

    Copy & paste the code below to embed this comment.
  2. Excellent article, I feel like this solution has been hidden all these years because many web developers (such as myself) often tend to steer away from em’s and %‘s for obvious cross-browser reasons among others.

    Will defiantly be adding this to my favorites!

    Copy & paste the code below to embed this comment.
  3. Thanks Ethan. Great Article. Fluid design solutions seems to be the way to go.

    Copy & paste the code below to embed this comment.
  4. Excellent article. :)

    You have to watch out with percentages though with fluid grids, as these are not crossbrowser.

    Seem like webkit based browsers have trouble with them. Aswell as Opera. Gecko and Trident seem to handle percentages better.

    Here’s a example of a excellent fluid grid. Take a look at them in Firefox and IE and then look at them in Safari and Chrome. You can see that webkit based browsers can’t handle percentages like 25.5% that good.

    http://www.designinfluences.com/fluid960gs/

    Copy & paste the code below to embed this comment.
  5. This doesn’t appear to address concerns about fluid vertical spacing, how does that work?

    http://doctype.com/EuS

    Thank you,
      Andrew J. Leer

    Copy & paste the code below to embed this comment.
  6. Excellent article. Just a quick question, is it possible to use fluid (percentage based) line heights? I’ve tried a couple of times but can never get it to work – as in, the line-height does not adjust when the browser is resized.

    Any ideas?
    Dan

    Copy & paste the code below to embed this comment.
  7. Here’s a very helpful tool I found that’s a nice companion to this well-written and valuable article: http://www.29digital.net/grid

    Enjoy!

    DC

    Copy & paste the code below to embed this comment.
  8. In your HTML example you might want to look at the commenting. Even though DIV closing tags all look the same, closing tag comments does not.

    In your example it looks like you have an incorrect DIV nesting structure because the content class DIV is closed right after the opening of the main class DIV, and then the main class DIV is closed later on.

    A small issue really, in an overall very interesting article!

    Copy & paste the code below to embed this comment.
  9. I always found ems and % to be a little confusing but this is a great article and i think it convinced me to give it one more try.

    Copy & paste the code below to embed this comment.
  10. Noticed this too. Original post by mcn:

    “In your HTML example you might want to look at the commenting. Even though DIV closing tags all look the same, closing tag comments does not.

    In your example it looks like you have an incorrect DIV nesting structure because the content class DIV is closed right after the opening of the main class DIV, and then the main class DIV is closed later on.

    A small issue really, in an overall very interesting article!”

    http://www.alistapart.com/comments/fluidgrids/P70/#78

    Copy & paste the code below to embed this comment.
  11. Ethan I agree with you that fixed-width design is evil but how to get away from it without using dreaded percentage tables or other methods was not always easy. Your presentation of the fluid grid is well done and makes it simple to understand and execute.

    Copy & paste the code below to embed this comment.