CSS positioning: Here is <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.

Custom Web Design by Rainbo Design

CSS Positioning Tutorial - Introduction



Delicious
Bookmark this
on Delicious

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 is the <div> 'contentBox'. You could further sub-divide 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> at the beginning of your HTML document. This tells Microsoft Internet Explorer v6.0 and higher, Firefox, and most of the other major browsers like Chrome, Opera and Safari to use their Standards Compliance Mode for page rendering. This 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, CSS Positioning: Relative vs. Absolute CSS Positioning & Document Flow

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.