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.
Here 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, Netscape v6.0 and higher, 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. Also see the Netscape DevEdge site for information on Netscape, and Mozilla.org for information on their browsers.
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.
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.rainbo.net/pub/index.html">Rainbo Rick's Tools and Scripts for
Webmasters</a>
Richard L. Trethewey
Return to RainboRick's Tools and Scripts for Webmasters