The Perfect Fluid Width Layout - CSS-Tricks
Popularity Report
![]() |
|||
![]() |
|||
![]() |
|||
![]() |
|||
![]() |
|||
![]() |
URL Tag Cloud
Bookmark History
Saved by 9 people (1 private), first by anonymouse user on 2008-01-14
- Naturegeek on 2008-07-08 - Tags webdesign , design , layout , accessibility , usability , browsers , CSS
- Adiwidjaja on 2008-03-29 - Tags css , html , fluid
- Joshnunn on 2008-02-28 - Tags css , htmlandcss
- Alfredwesterveld on 2008-02-19 - Tags quickd
- Gatiao on 2008-02-15 - Tags Bookmarks Toolbar Folder , Webdev , CSS
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.


Public Comment