CSS positioning: Here is <box1> absolutely positioned from top of <body>. 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
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.
This is the main content box. 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.
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 Mozilla, 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.
Yes, I'm aware that I have no great talent or imagination when it comes to color schemes and that this layout is terribly boxy. More on CSS Positioning and Layers.
Author's Note:
There's nothing here that warrants a copyright notice, and so you're free to use any part of this document as you please, but if you find this information helpful, I'd appreciate it if you would add a link on your website as follows:
<a href="http://www.rainbodesign.com/pub/">Rainbo Design's Tools and Scripts for Webmasters</a>
Richard L. Trethewey
Return to Rainbo Design's Tools and Scripts for Webmasters
