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

CSS Tutorials - Setting Page Width Relative to the Browser Width

By: FYICenter.com

(Continued from previous topic...)

How To Set Page Width Relative To the Browser Width?

The easiest way to set your page width is to not set any page width. Your page width will be equal to the browser window's width minus margins. If you want to try this, you can enter the following HTML document called, browserLayout.html:

<html><body style="{margin: 0.2in}">
<H1>Page Width Equal to Browser Width</H1>
<p><script language="JavaScript">
  for (i=0; i<300; i++) {
    for (j=0; j<10; j++) {
      document.write(j+' ');
    }
  }
</script></p>
<p align="right">By FYICenter.com</p>
</body></html>

Now view browserLayout.html in a Web browser. You will see a page fill with numbers. The page width will equal to the browser window width. If you resize the browser window, the page width will be resized too. The page will look like this:
           

(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...