CSS Absolute Positioning Demo #2

Introduction

The body has been limited to a width of 70% and given a right margin of 30%. The second paragraph has been given a border (to make the positioning easier to see) and a width of 27%. It has been absolutely positioned into the lower right corner of the page. This page demonstrates the difficulty with using the bottom property to position things absolutely within the page as a whole. By definition, bottom should be treated as an offset between the bottom of the positioned element and the bottom of the page. However, many browsers will interpret it as an offset between the bottom of the positioned element and the bottom of the browser window. View this page in a variety of browsers to see if you can find two that behave differently. For this reason, most Web designers use left, right and top as their positioning properties whenever they can.

Nam nunc. Sed scelerisque ligula vel nisi. Nunc sollicitudin vulputate lorem. Donec neque pede, scelerisque eu, tristique vitae, fermentum vel, dui. Fusce sagittis consequat velit. Aliquam non eros quis magna vehicula elementum. Duis nunc ante, euismod ut, ultricies eu, auctor ut, lectus.

Sed porttitor lacinia elit. Aliquam eget tortor a felis luctus vehicula. Pellentesque sit amet erat a nisl consequat mollis. Praesent justo tellus, tempus et, egestas eu, gravida nec, neque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Suspendisse fermentum ornare pede. Aliquam convallis bibendum felis. Sed fermentum ultricies turpis. Sed ut turpis. Integer sagittis. Nam et quam. Pellentesque ac magna. Aenean nulla orci, lacinia ut, euismod in, rutrum et, quam.


Copyright 2006, by Michael Gildersleeve
Computer Science
University of New Hampshire
Durham, NH 03824 USA
mike.gildersleeve@unh.edu
http://www.cs.unh.edu/cit/403/