The Perfect Fluid Width Layout

Avatar of Chris Coyier
Chris Coyier on

I’ve been thinking a lot about screen resolution lately and how the use of fluid width websites is the best way to accommodate all visitors screen resolutions. The alternative, static width websites, have to make a choice. You can optimize for 800px width, the lowest common denominator, and give up the use of several hundred pixels of width for users with larger screens. Or, you can optimize for 1024px and just make your 800px visitors horizontal scroll. Anything wider than 1024px is too much for static width sites, in my opinion.

I think the best possible scenario is to make a fluid width site that accomodates everyone. Here is what I think would be the “Perfect” fluid width layout:

  • Works in all major browsers
  • Shrinks to 780px
    This accomodates users with 800×600 resolution, with no horizontal scroll!
  • Grows to 1260px
    This accomodates users with 1280×768 resolution and everything in between.
  • This accommodates 90%+ of all internet users. You could easily make this layout grow larger, but be mindful of how line-length affects readability. Nobody wants to read a line of text 1980px long.
  • Sidebars are of “equal height” to the main content
  • Page content is centered for users with even higher resolutions.

I set to work and wouldn’t ya know it, I think I got it =)


I’m fairly nervous calling it “Perfect”, because I’m sure some geniuses out there are going to poke some holes in it and call me out on a few things. That’s fine, I hope that happens because I’m up to the task of making sure it’s up to par and the best it can be. I’ve tested it in Firefox, Safari, Opera, and Internet Explorer 6 and it works in all those, so I’m just going to cross my fingers and post this. As usual, feel free to download and do with what you please. Links are always awesome.