Home      Products & Services      Contact Us      Links

WebHatchers will design & develop your site for you.

Website Menu Heaven: menus, buttons, etc.

Send us your questions.

site search by freefind

SEO, Google, Privacy
   and Anonymity
Browser Insanity
Popups and Tooltips
Free Website Search
HTML Form Creator
Buttons and Menus
Image Uploading
Website Poll
IM and Texting
   or Not MySQL
Personal Status Boards
Content Management
Article Content
   Management Systems
Website Directory
   CMS Systems
Photo Gallery CMS
Forum CMS
Blog CMS
Customer Records
   Management CMS
Address Book CMS
Private Messaging CMS
Chat Room CMS
JavaScript Charts
   and Graphs

Free Personal Status Boards (PSB™)

Free Standard Free PSB

Free PSB Pro Version

Free Social PSB

Free Social PSB Plus (with Email)

Free Business PSB

Free Business PSB Plus (with Email)

PSB demo

Social PSB demo

Business PSB demo

So what's all this PSB stuff about?

Chart comparing business status boards

PSB hosting diagram

PSB Licence Agreement

Copyright © 2002 -
MCS Investments, Inc. sitemap

PSBs, social networking, social evolution, microcommunities, personal status boards
PSBs, social networking, business personal status boards
website design, ecommerce solutions
website menus, buttons, image rotators
Ez-Architect, home design software
the magic carpet and the cement wall, children's adventure book
the squirrel valley railroad, model railroad videos, model train dvds
the deep rock railroad, model railroad videos, model train dvds

Div Box Positioning with Absolute and Relative Positioning

In the file Div-Box-Positioning-with-Absolute-and-Relative-Positioning.html, there are numerous examples of box positioning. The IE Box Model Problem is demonstrated, and the details of the nested divs fix are given. Note that not only is the outer div width not its normal width (but instead the sum of its 2 side borders and 2 side paddings and width), but only its width and margin are given. The inner div declares only its padding and border properties.

The top 3 boxes show that if you use absolute positioning with no top or left property declarations, but instead you use margin percent and pixel values, you need to put the divs in a certain order if they're to be positioned horizontally of one another. Most of the rest of the boxes demonstrate that, without positioning, boxes will follow normal flow: one following the next, vertically. They'll be tangent (touching) vertically unless you give margin values that keep their contents apart. The margins of 2 vertically tangent boxes will naturally collapse: the greater of the 2 values will get used while the lesser is 86ed. They're never added.

The 5th div in the code shows using margin values to keep boxes separated. The 6th div in the code shows padding use to keep text away from box edges. The 7th and 8th divs show that if you use absolute position and left and top properties, you can put the boxes wherever you want, even overlapping other content. The later divs in the markup code get to overlap the boxes that come earlier. The exception is if you add a CSS style to a div that gives it a high number. The 7th and 8th divs have the page's body display box as their context box. So their left and right and top and bottom property values specify offsets from the body. The body is their parent and ancestor. They are its children. But you can nest divs so the outer ones are parents of the inner ones, like in the Box Model Problem above. Since there's no positioning these 2 nested boxes are static, or in the normal flow, so their page positions are the same.

In case you're not following, here are the basics: Everything starts in the normal flow until it gets positioned. If it gets a fixed position it's positioned relative to the entire page and it doesn't scroll when the page scrolls. If it gets inherited for its positioning value, it gets the position value of its parent. If it gets a relative position, it gets positioned/offset relative to its normal flow. If it gets an absolute position, it gets positioned relative to its context box. Static merely means normal flow and it's used to reset a positioned element back to unpositioned. Do not use the right or bottom properties for positioning: they're too buggy.

To reset a box to be in the normal flow location so it can be the context box for some absolutely positioned children, just give the relative value for its position property and don't give any type of offset values. This is shown with the light green parent div at the bottom of this test page. It contains 4 children, which are each other's siblings. All of the 4 box's absolutely positioned offset measurements are relative to the top left of big parent div. We used these style rules on one of these nested children: top 40% and left 75%. We could have used pixels (px) or ems (1 em is the current font's size, so if the font is 16 pixels then 0.25em is 4 pixels) or inches (in) or centimeters (cm) or points (pt) as well as percentages (%).