Skip to main content

The Perfect Fluid Width Layout - CSS-Tricks

Popularity Report

Total Popularity Score: 0

Loading...
Loading...
Loading...
Loading...
Loading...
Loading...

Rank

Bookmark History

Saved by 9 people (1 private), first by anonymouse user on 2008-01-14


Public Sticky notes

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 800x600 resolution, with no horizontal scroll!
  • Grows to 1260px
    This accomodates users with 1280x768 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.

Highlighted by pabranch

on 2008-02-13 by pabranch

I use 700px to allow for my 1024x768 Tablet PC to be in Portrait mode.