CSS positioning: This is the <div> 'box1', absolutely positioned from top of the <body> tag. Most of the measurements for this document are in percentages to allow for various screen sizes and user preferences. Some tweaking could help balance things a bit better.
CSS Positioning Tutorial - Introduction
CSS Positioning is a powerful web design tool and it's simple once you understand the basics. There are two choices for the "position" property that are most important to understand: absolute and relative. A position setting of 'absolute' removes the element from the normal document flow and sets the element's position with respect to its parent positioned element. Relative positioning sets the element's position with respect to its position in the normal document flow, offset by the 'top', 'bottom', 'left', and/or 'right' settings.
This box of text with the red border is the <div> 'contentBox'. I have further sub-divided this <div> into columns. The point of all this is to show that each absolutely positioned <div> is positioned relative to its parent containing block element. Despite its appearance, this page does not rely on <table>s. To understand how this page works, look at the source code by selecting View-->Source in your browser. All of the CSS instructions are contained within this page.
When using CSS positioning, to get the best possible cross-browser compatibility, you need to be sure to use a complete <!DOCTYPE> statement (or the HTML 5 "<!DOCTYPE html>" DOCTYPE) at the beginning of your HTML document. This sets the major browsers, including Microsoft Internet Explorer, Firefox, Chrome, Opera and Safari, to use their Standards Compliance Mode for page rendering. Doing so minimizes the measuring and positioning differences between the major browser families. See the Microsoft Developer Network Library for more information on the history of their Box Model and CSS Positioning in general.
The complete, detailed CSS Tutorial is on the next page,
Learn CSS Positioning: Relative vs. Absolute
There are several other lessons here, available through the links on the left. Also see my JavaScript/CSS Slideshow Package, and CSS Animation Demonstration which include free scripts for your site that will show you more about using CSS Positioning.
