Home >> Tutorials/FAQs >> CSS Tutorials >> Index

CSS Tutorials - Page Content Width

By: FYICenter.com

(Continued from previous topic...)

How Wide Do You Want Your Page Content to Be?

How wide do you want your page content to be? This seems to be a simple question. But not really. Below are some potential answers. None of them is ideal:

  • "I want my page width equal to the screen width." This is good for visitors with smaller screen. But your page will look ugly on those very wide screen.
  • "I want my page width to be fixed to 10 inches." This stops your page to grow with the screen size. But you will have trouble to satisfy visitors with different browser resolutions. Let's say you put an image of 1200 pixels wide on your page. This image will be displayed perfectly as 10 inches on a 120DPI browser, but it will be displayed as 13.33 inches on a 90DPI browser. Your page layout will be damaged.
  • "I want my page width to be fixed to 1000 pixels." This is good to maintain the page layout. But your page physical size will vary depending on browser's resolutions. Your page will be displayed as 8.33 inches on a 120DPI browser, and 11.11 inches on a 90DPI browser.

Comparing all 3 answers, the last one seems to be best. And most popular Web sites do fix their page widths to pixel numbers.

(Continued on next topic...)

  1. What Needs To Be Considered When Designing Page Layout?
  2. What Is Screen Resolution?
  3. What Is Browser Resolution?
  4. How To Test Browser Resolutions?
  5. How Wide Do You Want Your Page Content to Be?
  6. What Are the Page Widths on Popular Websites?
  7. What Are the Length Units Used in CSS?
  8. How To Set Page Width Relative To the Browser Width?
  9. How To Set Page Width to a Fixed Value?
  10. How To Center Your Page in Browser Windows?
  11. What Happen to Images with Absolute Page Width Units?
  12. How To Set Page Widths to Relative Length Units?
  13. What Happen to Font Sizes with Relative Page Width Units?
  14. How To Set Font Sizes to Relative Length Units?
  15. What Are the Background Style Properties?
  16. How To Specify a Background Image?
  17. How To Position Background Images?
  18. How To Specify Two Background Images on a Page?

Selected Developer Jobs:

More...