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

CSS Tutorials - Images with Absolute Page Width Units

By: FYICenter.com

(Continued from previous topic...)

What Happen to Images with Absolute Page Width Units?

If you set your page width to absolute length units like inches, what will happen to image sizes? Usually, images have relative length units like pixels. If you include large images on your pages, visitors with different browser resolutions may see your images behave differently because of the relative length units on images.

The HTML and CSS code below gives you a good example:

<html><head>
<style type="text/css">
  BODY {background-color: gray}
  DIV.page {background-color: white; width: 6.0in;
    padding: 0.25in; text-align: left}
  HR {width: 6.0in}
  P {width: 6.0in}
</style>
</head><body><center><div class="page">
<p>
<img src=fyi_banner_blended.jpg width=728 width=90>
</p>
<H1>6 Inches Wide with an Image</H1>
<hr align=left>
<p><script language="JavaScript">
  for (i=0; i<100; i++) {
    for (j=0; j<10; j++) {
      document.write(j+' ');
    }
  }
</script></p>
<p align="right">By FYICenter.com</p>
</div></center></body></html>

Save the code in 6InchPageLayout.html and view it with FireFox on a 1280x1024 screen, you will see a nice looking page like this:
           

But if you view it with IE on a 1280x1024 screen, you will see your page behaving incorrectly as:
           

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