1 Nice article

Very nice article, Ethan.

I like clear explanations of the grid theory on the web, especially fluid grids, even if I was already doing most of what you said here.

On a more general note, this is the type of article I enjoy most on ALA.

posted at 12:07 am on March 3, 2009 by Srdjan Pejic

2 Excellent

Terrific explanation on setting up a fluid grid. I have a side project I’m experimenting with that this would be perfect for, thanks!

posted at 12:25 am on March 3, 2009 by Sean Foushee

3 My excuses are running out...

As somebody who hasn’t ever given fluid layouts the time they deserve, I feel like this article is going to be a go-to resource when I do finally take that plunge. Of course, it’s the application of fixed elements (as you say) that really worries me when planning a site of this kind – but this is still one step closer.

Much appreciated!

posted at 01:00 am on March 3, 2009 by andi farr

4 Ping Pong

It seems like everywhere I look people are saying, “Fixed with design is evil!” or “Fluid design is evil!” It’s all rather silly.

However, the other day I suggested a person make their site fixed width (or at least max width) because it would only have been a couple css changes and it would have saved all of us faithful readers from ridiculously wide paragraphs. I was told that fixed width sites were out. Oops, sorry, I guess I didn’t realize! :-)

Don’t get me wrong, I’m sure you would never make that mistake. It was just funny.

posted at 01:37 am on March 3, 2009 by Matt C

5 Let them conform to us

Change media to conform to an audience is counter-intuitive. Design for your audience, and let the delivery system evolve.

posted at 02:06 am on March 3, 2009 by Florida Web Design

6 Cameron Moll's patch, ftw

RE: Cameron’s patch —I had no idea that existed. Awesome. Em-based grids here I come!

I’ve been holding out my widespread adoption at large because of IE6’s treatment of min/max-widths, or lack thereof. Until now!

Thanks, The Robot™!

posted at 02:08 am on March 3, 2009 by Jason Robb

7 The formula rocks

Wow, I got to say the ‘target ÷ context = result‘ formula rocks and makes it easier for me to remember! Before this I was just lazy to do the math and simply guess the width in pixels by looking at Firebug’s HTML -> Layout, or Style/*Show Computed Style*.

Thanks!

posted at 02:25 am on March 3, 2009 by Lim Chee Aun

8 Wish you were here

I’d give you a big fat kiss!!

Two golden formulae. One I knew but kept forgetting (setting max-width in ems to keep legibility) and one I didn’t (T/C = R).

Outstanding stuff. I’m off to experiment..

posted at 04:41 am on March 3, 2009 by Phil Houghton

9 Number of results per page

I’m currently working on a flexible grid layout and using it to display results all arranged in the page with thumbnails (the classic search on the left-hand side plus the flexible content area with the result set).

My issue is that my search has a classical selection of number of results per page. But with flexible layout on results area the number of results per page lost the meaning since the concept now changes from “desired number of results per page” to “desired number of rows of results per page”.

Example:
With a set of 16 results and a 8 results per page selection might get me a page of results with 5 thumbnails in the first row and other 3 on the second, misleading the user to overlook the second page of results since there’s still place for extra results on the second row.

It seems to me that JavaScript and calculation and optimization based on window size is the only real solution. Am I missing something?

Thanks in advance, iG

posted at 05:24 am on March 3, 2009 by Ivo Gonçalves

10 A more robust implementation

Hi,

if you’re interested in flexible grids, also take a look at CSS Framework YAML (Yet Another Multicolumn Layout) and its different and more robust implementation of fluid grids that also works in older IE versions. YAML’s layout concept is strongly focussed on flexible layouts. Here are some examples .

posted at 05:45 am on March 3, 2009 by Dirk Jesse

Got something to say?

Discuss this article. We reserve the right to delete flames, trolls, and wood nymphs.

Create a new account or sign in below if you’d like to leave a comment.

Forgot your password?

Subscribe to this article's comments: RSS (what’s this?)