Fluid Grids

by Ethan Marcotte

81 Reader Comments

Back to the Article
  1. 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.

    Copy & paste the code below to embed this comment.
  2. 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?

    Copy & paste the code below to embed this comment.
  3. 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.

    Copy & paste the code below to embed this comment.
  4. “Greg”:http://www.alistapart.com/comments/fluidgrids?page=2#19, 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”:http://www.ollicle.com/eg/jquery/autolineheight/ is a promising-looking jQuery plugin I’ve found, but that kind of functionality could easily be replicated outside of that framework.

    “Christopher”:http://www.alistapart.com/comments/fluidgrids?page=3#21 , 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”:http://positioniseverything.net/explorer/doubled-margin.html ), IE6 should play pretty nicely. But do let me know if you’re encountering any errors.

    “Dave”:http://www.alistapart.com/comments/fluidgrids?page=3#22 , 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.

    Copy & paste the code below to embed this comment.
  5. 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.

    Copy & paste the code below to embed this comment.
  6. “Sandro”:http://www.alistapart.com/comments/fluidgrids?page=3#25 :

    Noted.

    ;)

    Copy & paste the code below to embed this comment.
  7. Ethan, great article.

    Thanks for the resources, and the detailed description.

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

    Copy & paste the code below to embed this comment.
  8. 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.

    ;)

    Copy & paste the code below to embed this comment.
  9. “PXtoEM.com”:http://pxtoem.com will allow you to convert between PX and EM easily!

    Copy & paste the code below to embed this comment.
  10. 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…

    Copy & paste the code below to embed this comment.
  11. Ethan, thanks for your well-written and informative article. Rounding errors have typically caused me to run screaming in a direction opposite of fluidity, but this approach will certainly have me experimenting.

    A helpful tip for Mac users: “CSS Typography”:http://www.apple.com/downloads/dashboard/developer/csstypographycalculator.html is a dashboard widget that will output calculated units using base size and target size as input values. The widget was created for type, but should work equally well for layout (instead of ‘base text size’ just think of it as ‘base size’).

    Copy & paste the code below to embed this comment.
  12. Perfect timing for this article as I was just planning on learning how to do this.

    One question that isn’t addressed (for super-newbs) – can someone point me to a great resource for learning how to work with the fixed-width elements like images and video?

    Thanks again for taking the time to write this.

    Copy & paste the code below to embed this comment.
  13. “Jon”:http://www.alistapart.com/comments/fluidgrids?page=4#31 , thanks for the widget recommendation. Looks pretty handy, but I usually make do with “OS X’s calculator”:http://en.wikipedia.org/wiki/Calculator_(Mac_OS) .

    And “Jim”:http://www.alistapart.com/comments/fluidgrids?page=4#32 , that’s not a newbie question at all. Once you’ve squared away the fluid grid, dealing with fixed-width elements inside a non-fixed context is the other half of the battle. I’m planning “a series of blog entries”:http://unstoppablerobotninja.com/ that describe some of the techniques I’ve uncovered over the past year; alternately, if I’m very fortunate and there’s enough interest, maybe there’ll be follow-up article on the topic. Who knows?

    Copy & paste the code below to embed this comment.
  14. I used a very similar approach for a “technical demonstration of web based resolution independence”:http://windyroad.org/static/resolution-independence/
    The vast majority of the resizing (i.e. everything except the images) is handled simply by setting the font size on the body element.  Nice and simple.

    Copy & paste the code below to embed this comment.
  15. I was thinking from the title we would be treated to something on the order of the flexible version of Blueprint I saw a while back, where the pixel-width of all twenty-four grid sections had been converted to percentages. Maybe with an additional thought on how to remove the presentational markup that system described.

    Most of what you’ve described here, though, I was using a couple of years ago e.g., “CUPE Local 2045”:http://2045.cupe.ca or “CUPE’s VIDC”:http://vidc.cupe.ca and thought I was just trying to keep up with current practises.

    But, if that wasn’t the case, I’m glad to see it being delineated here, because I’ve always preferred “stretch-or-squeeze-to-suit” designs over “pretend this is a piece of paper” ones.

    Copy & paste the code below to embed this comment.
  16. Thanks for this article, I have done similar things myself to create fluid / resizable websites. My initial reason for using ems in this way was because if a user increases the text size (I’ve been using ems for accessible web design for just over a year now) and the rest of your grid / layout stays the same size all your carefully worked out padding and margin sizes stay the same, and it can look awful. Once I realised that I could use ems as width, height etc measurements, I started to use them.

    Your formula for working out em sizes is different to the one I use :) I went with setting html to 101% and then, body { font-size: 62.5%;} which puts all the ems to be roughly the same as pixel sizes, with a decimal point between – example 16px would be the same as 1.6em – but I always come up against a brick wall when working with ems for anything other than font-size.

    I think your formula is better than mine, and will be using yours from now on! So thank you, you’ve saved me a load of time!

    Copy & paste the code below to embed this comment.
  17. Hi Ethan,

    You have explained the concept of fluid grid very efficiently. It was a very informative and insightful article. Keep it up!

    Copy & paste the code below to embed this comment.
  18. this is all good, but hey, if i got 1680 (or wider) screen width, it still fills only about a half, why bother making it fluid?

    yes, i know it’s because of the measure it cannot be wider

    but how about adding some js in right places, so if the screen is dramatically wider, content would SPLIT into 2 columns? I already implement this concept on a few of my projects, and it works just great, not to mention it looks so fresh and unusual.

    Copy & paste the code below to embed this comment.
  19. I’ve been wanting to say all this for ages but you’ve done it for me :)

    Flexible grids are the future, see some more example on my site.
    I have a (yet to be published) solution to IE’s pixellated image resizing, see it here: www.2dforever.com

    Copy & paste the code below to embed this comment.
  20. First, let me heap on the praise. You deserve it, Ethan. A wonderfully insightful article on a topic that has intrigued me, yet always eluded me.

    But I can’t get behind the fluid hype. You see, my day job consists of adhering to the strict constraints of user-generated content, specifically media like photos and videos. For the foreseeable future, a 500px image will always be just that – 500 pixels wide. No wider, no narrower. Sure, Mac browsers do a wonderful job of scaling pics, but it’s just not dynamic enough across all browsers on all systems to even consider fudging dimensions. Video is better, but the same sacrifices still do exist.

    And that’s not even getting into the constraints of universally accepted ad sizes like that evil temptress, the 728×90 banner.

    Text is a gracefully fluid content type. Craigslist and W3C? PERFECT candidates for a fluid approach.

    So, until the day there is a truly viable approach for fluid media, I will have to remain a Fixed Man (a fixer?). It’s not an excuse or a cop-out. It just is what it is.

    Copy & paste the code below to embed this comment.
  21. “Ryan”:http://www.alistapart.com/comments/fluidgrids?page=4#40 , thanks so much for the feedback. You rascally fixer, you.

    And believe me, I don’t consider your position a cop-out. As I said in the article, I don’t pretend that fixed-width design is easy, or without its fair share of problems. Adding another variable on top of the myriad browser- and content-related issues we already navigate?

    Yeah, sign me up for that year-long subscription to Crazy Magazine, Marcotte.

    Still, I don’t think that fluid media (I love that term) is as far off as you suggest. In what I’ve seen over the past year, image and video scaling actually isn’t that bad on non-Mac browsers. Yes, it takes a bit of work, and maybe the solutions aren’t as elegant as we’d like. But they are workable, and can definitely be improved. At the very least, I don’t see the current challenges as an impasse; no more than the problems we’ve already solved, like getting PNG transparency to work in IE6.

    I think if more folks from our community discussed the issues that arise from media/layout scaling (like the ones you’ve encountered), we’d be better equipped to collectively address them. Like I said, I really think our users would thank us for the effort.

    Copy & paste the code below to embed this comment.
  22. The title is somewhat misleading. The grid layout is something look like this one. But the techniques used could be extended to design grid layout.

    Fixed to liquid? What’s holy, just px or em to %. But it should be noted using em as unit of any of layout can be troublesome coz em value is dependent on the font size defined in body tag if the unit of the font-size is using em.

    Copy & paste the code below to embed this comment.
  23. Fantastic article Ethan! You’ve hit upon a very susict explaination of fluid grids; something which I had previously considered a chimera of paradox and fancy.

    Though I have no critism of the article, I did notice an inconsistency in one code snippet that I wanted to ask about. I might be missing something or I might be nittpicking – I appologize in either case – but in the case-study markup, dosen’t the first </div> following “Main content goes here. Lorem ipsum etc., etc.” actually close the .main <div>? It is commented as being the end of .content. Likewise, what I would think is the close of .content, is comment the close of .main.

    I do appologize if this is a simple typo, but the article was so informative that don’t want to miss a drop. Thanks again!

    Evan

    Copy & paste the code below to embed this comment.
  24. “Evan”:http://www.alistapart.com/comments/fluidgrids?page=5#43 , great catch—that is indeed an error. Thanks so much!

    Copy & paste the code below to embed this comment.
  25. Why is the font size so different when opening http://www.alistapart.com/d/fluidgrids/examples/grid/final.html with Firefox vs with Opera ?

    Copy & paste the code below to embed this comment.
  26. “Peter”:http://www.alistapart.com/comments/fluidgrids?page=5#45 , I’m not seeing much of an issue between Opera 9.6 and Firefox 3 (both OS X). The right-hand sidebar’s set a bit larger in Opera, but that’s it—everything seems okay over here.

    Copy & paste the code below to embed this comment.
  27. @Peter Brown
    Stupidly (IMHO), FF3 gives you no clue anywhere as to what Zoom selection is in effect. I once spent three hours looking for what I was sure was some kind of font-size inheritance issue because the font-size in FF was much larger than in IE.
    Turned out the Zoom level in FF was at 120%. Ctrl+0 fixed all. Check it out.
    If this turns out to be the case, you are not alone:
    Why Does My Site Look So Small In Firefox
    “http://www.webmasterworld.com/css/3752637.htm”:url
    Roger Johansson recently clued his readers about an FF add-on called NoSquint that will show the Zoom level in the status bar:
    “http://www.456bereastreet.com/archive/200903/​check_your_design_with_text_size_increased_to_200_percent”:url
    If it turns out that’s the case and you, too, think it’s dumb (IYHO), you can complain here:
    “https://bugzilla.mozilla.org/enter_bug.cgi?product=Core”:url

    Copy & paste the code below to embed this comment.
  28. that must be why Opera is my main browser for now. That’s a good diagnostic, Richard.

    Copy & paste the code below to embed this comment.
  29. Thanks for the thought-provoking article.

    I’ve been using the fluid 960gs framework for a while – and this article would permit some useful tweaks to that. I found I could add a ‘Jello’ mold http://www.positioniseverything.net/articles/jello-expo.html to the fluid layout http://www.designinfluences.com/fluid960gs/ to set up min and max widths so the layout doesn’t collapse too much or get way too wide… If anyone’s interested I can forward on a zip of the combined result (although it still needs some tweaking).

    Copy & paste the code below to embed this comment.
  30. With FF3 and now Safari 4 using page zoom instead of text zoom, isn’t there the distinct possibility that this sort of technique will be rendered obsolete?

    Copy & paste the code below to embed this comment.
  31. “Dan”:http://www.alistapart.com/comments/fluidgrids?page=5#50 , thanks for the comment. I’d respond that beyond its obvious accessibility benefits, page zoom is great for users whose screens are considerably larger than the design’s constraints. But what about users on the other end of the spectrum, viewing your site on an older display, or even in a non-maximized browser window that’s only fifty pixels too narrow? Page zoom is a great, awesome feature, to be sure: but the onus is still on us (and on our designs) to be as flexible as possible.

    Just to underline a point that some other folks have tripped on: fluid grids do not rely on max-width, whether it’s set in ems, pixels, or even percentages. Rather, I was just using that as an example to show how the ratio calculation works. Sorry for any confusion that might’ve caused.

    Copy & paste the code below to embed this comment.
  32. This article is a great weight lifted. The beauty of simple math coupled with elegance, creating a balanced design.

    This is worth of a hard copy posted next to the work station.

    Copy & paste the code below to embed this comment.
  33. I actually use a fixed width column for my menu and a fixed height for my header, but have made the content section fluid using javascript. I found a script that gets the window size (inner size +/- scroll bars). Using javascript I then ‘re-write’ my width and max-height CSS for both onLoad() and onresize(). This allows my content area to be fluid while the header and menu remain fixed. I won’t contend that my design is the best, but it is better than it was previously (when designed strictly for a 1280×1024 maximized browser window).

    Copy & paste the code below to embed this comment.
  34. Many thanks. Just the sort of article I really enjoy on ALA (we need more!). Really helped me to understand the concept of relativity when coding fluid designs. Thank you so much.

    Copy & paste the code below to embed this comment.
  35. There has already been a few mentionings of good tools for easy conversions between pixels and EM:s. When it comes to font sizes I recommend our “EM Table”:http://www.oktavilla.se/em_table. I think it’s really handy.

    Copy & paste the code below to embed this comment.
  36. Taking this one step further, we can use JavaScript to auto-resize the base font-size. Making it proportional to the width of the browser window does two things:

    1) The layout’s width can stretch beyond 998 pixels.

    2) You maintain the same word-count per line of text for widths above 998px (plus or minus a word). In other words, high-resolution screens won’t suffer from ridiculously wide columns.

    Here’s a quick and dirty script I wrote to do that. Widths below 1024px will maintain a 100% base font-size, while widths above 1024px will receive a proportionally larger base font-size.

    [removed]
    //<![CDATA[
      window.onload = window.onresize = function ()
      {
      var base_font_size = document.body.clientWidth * 100 / 1024;
      document.body.style.fontSize = Math.max(100, base_font_size) + “%”;
      }
    //]]>
    [removed]

    As an example, I’ve added this script to the fluid grid example here: http://www.bionicdreamer.com/fluidgrids/final.html

    Notice that if you increase your browser’s window width beyond 1024px, both the layout and its font grows larger while maintaining the same word count per line of text.

    Copy & paste the code below to embed this comment.
  37. Hmmm, looks like my script got mangled by the comment system. Here’s another try:

    [removed]

    //<![CDATA[

    window.onload = window.onresize = function ()

    {

    var base_font_size = document.body.clientWidth * 100 / 1024;

    document.body.style.fontSize = Math.max(100, base_font_size) + “%”;

    }

    //]]>

    [removed]

    Copy & paste the code below to embed this comment.
  38. Also being discussed in “Fluid Grids on Accessify Forum”:http://www.accessifyforum.com/viewtopic.php?t=13288 .

    The articles on ALA have been pretty getting pretty “meta” over the past couple of years, imho.

    But these 6 pages of positive comments and ideas accompanying show this is the sort of article ALA should go back to. Widely applicable, non-hacky front-end and backend techniques which improve adaptability and usability. That’s what “people who make websites” like to read about.

    Textile is pretty lame, even compared to Markdown and others of that ilk. (You can’t put punctuation immediately after a link!) Having said that, the live preview is very handy and works perfectly.

    Copy & paste the code below to embed this comment.
  39. Thank you! This is something I had “half figured out” on my own and messed around with.  You gave us a clear, concise description and cleared up some of the finer points for me – and thanks for the formula! That made my day!

    And I agree with previous posters who said this is the kind of article they like to see.  Thanks again!

    Copy & paste the code below to embed this comment.
  40. Yeah, using percentage widths is a great way to maximise space. As some have pointed out, the downside can be that lines of text get very long and that isn’t easy to read.

    The use of “max-width” should solve this, but IE doesn’t support it well up to IE7.

    Anyway, one point you mentioned is the use of fixed size elements such as images and Flash.

    Flash at least can be resized using percentages: leave off the height parameter and add a “%” to the width parameter value. It will scale relative to its parent, which of course in turn can be styled using percentages in CSS.

    More info here: http://animation.about.com/od/flashanimationtutorials/ss/flashexpandwind_2.htm

    If the images are purely decorative, Flash does a fairly decent job of scaling them, even past their prime, so a little Flash image-display widget could be a solution. Of course you can use CSS % for images too, but then it’s up to the browser to scale, which can look bad.

    Copy & paste the code below to embed this comment.
  41. As a thoroughly math-challenged designer, I found this article well written and helpful. I was able to use it to start building a new, fluid site, and plan to retrofit the other sites I maintain to be fluid and thus more user-friendly. This is a perfect example of the web medium truly coming into its own, moving beyond a screen version of printed documents. Huzzah!

    Copy & paste the code below to embed this comment.
  42. If you use body {fontsize: 62.5%;} this will set the body font-size 10px. So you don’t need to calculate each time. You can set max-width: 98.8em; 988 / 10 = 98.8.
    You don’t need a calculater next to you.

    Copy & paste the code below to embed this comment.
  43. Sorry this is posted somewhat after the fact; my RSS feed for this thread wasn’t updating. Thanks so much for your comments, all.

    A few responses:

    “Geoffrey”:http://www.alistapart.com/comments/fluidgrids?page=6#56 , thanks for posting that. You might also check out “that auto-leading jQuery plugin”:http://www.ollicle.com/2007/jun/03/jquery_lineheight_flexible.html I mentioned earlier.

    “Chris”:http://www.alistapart.com/comments/fluidgrids?page=6#60 , great feedback on fixed-width elements. I’ve actually had a fair bit of luck using percentages on “images”:http://unstoppablerobotninja.com/entry/happy-mica/ and “Flash”:http://unstoppablerobotninja.com/entry/scratch-that-dirt/ alike; “as I told Ryan”:http://www.alistapart.com/comments/fluidgrids?page=5#41 , the quality loss isn’t half as bad as I would’ve thought, especially with a minor JS patch for IE.

    “Shin”:http://www.alistapart.com/comments/fluidgrids?page=7#63 , that’s only true if the element you’re sizing is still referencing the body‘s font-size —that is, if none of its ancestors have had their font-size changed. Otherwise, you’ll need to reference the new, calculated value at that point in the document.

    Thanks again for the great feedback, everyone! Keep it coming.

    Copy & paste the code below to embed this comment.
  44. I think Fluid Layouts are simple to make.

    All we need to do is keep our mind of measurement in percentages. Thus the term, “Think in Percentage”.

    Fonts may or may not be important, but to me, they are not as important as blocks.

    The blocks are mandatory to have a percentile width.

    Restriction may be applied to make the site look prettier in targeted browsers. Such as using “max-width”, or “min-width” and added Javascript hacks to imitate the min-width for ie6.

    Additionally the best hack I seen is from deviantArt.

    It takes advantage of the overflow and display property in CSS. Thus making the Cite look very good in CSS.

     

    Copy & paste the code below to embed this comment.
  45. If anyone’s interested, I recently wrote “a blog entry on fluid images”:http://unstoppablerobotninja.com/entry/fluid-images/ to hopefully address some of the questions in this thread.

    Thanks again for reading, and for all the great feedback.

    Copy & paste the code below to embed this comment.
  46. Just happen to notice that when you zoom in on the text using Google Chrome that the text overflows the columns? Does not happen in IE 8.

    Copy & paste the code below to embed this comment.
  47. I’ve been really excited about the developments on this site. From the texture atlas with sprites and background positioning, and now this! I’m here to express my gratitude for the work you are doing and to keep it up. Also, if you need any graphic work done on the fly drop me an email and I could probably help out since ALA has helped out so much.

    Thanks again! :-P

    Copy & paste the code below to embed this comment.
  48. Thanks for an excellent walkthrough Ethan. I used a similar approach when working on the “website for the Swedish government”:http://www.sweden.gov.se/ a few years ago. The only drawback with this technique is that, with a complex design, it tends to become rather complicated after a while. So it’s not as easy as using pixels, but for some projects it’s definitely worth it!

    Copy & paste the code below to embed this comment.
  49. This has been really helpful to me along with all of the other great content on ALA. I will be sure to try and use this method myself.

    Normally I never liked fluid layouts much because of having to figure out the normative numbers. Using ems as a relative number method has given me a shinier outlook on fluid design.

    Thanks!

    Copy & paste the code below to embed this comment.
  50. First I’d like to say that I really enjoyed reading your article, it was very honest and encapsulated many modern web design issues.

    However to get to the point I would like to throw up the issue of tables. The reason why tables were previously loved by web designers is because they could do very simply what you had to with css. They create flexible grids. I understand completely why we dropped tables in favour of divs, but tables were essentially a grid framework for the internet. I know they had their downsides, but they did provide some consistency to web design. Don’t forget your past!

    Copy & paste the code below to embed this comment.
  51. 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.
  52. 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.
  53. Thanks Ethan. Great Article. Fluid design solutions seems to be the way to go.

    Copy & paste the code below to embed this comment.
  54. 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.
  55. 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.
  56. 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.
  57. 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.
  58. 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.
  59. 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.
  60. 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.
  61. 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.