zen positioning without all the math and the negative margins - it's possible and super easy! here's how:

the zen CSS was driving me up the wall with all the math, and i imagine it scares some newbies off. negative margins are difficult to grasp even for experienced CSS coders. i figured if i could eliminate the negative margins, i could get almost anyone to use Zen.

after thinking about it for a while, i've found that i can use absolute positioning to eliminate ALL the math. here's how:

#main is the parent element of #content, #navbar, #sidebar-left and #sidebar-right. #main has its position set to relative; this means absolutely positioned child elements will be positioned relative to the top/right/left/bottom of #main and not relative to edges of the browser. by using absolute positioning for #navbar and the sidebars i've found that i don't need to do any math at all. check out my code and tell me what you think. if it works for others (it works great for me on my site), i say we seriously consider replacing the current Zen layout CSS with this easier CSS.

#main
{
   position: relative;  /*absolutely positioned child elements will be positioned relative to parent and not to the browser*/
}

#navbar {
   height: 50px;
   position: absolute;
   top: 0px; /* place 0px from the top edge of #main */
   left: 0px; /* place 0px from the left edge of #main */
   margin: 0px;
}

#sidebar-left {
   width: 200px;
   position: absolute;
   top: 50px; /* set to height of navbar - 50px from the top edge of #main is right below the navbar*/
   left: 0px; /* place 0px from the left edge of #main */ 
   margin: 0px;
}

#sidebar-right {
   width: 200px;
   position: absolute;
   top: 50px; /* set to height of navbar - 50px from the top edge of #main is right below the navbar*/
   right: 0px; /* place 0px from the right edge of #main */
   margin: 0px;
}


#content, .no-sidebars #content {	
   margin-left: 0;
   margin-right: 0;
   margin-top: 50px /*set to height of navbar */
   padding: 0; 
}

.sidebar-left #content {
   margin-left: 200px; /* width of #sidebar-left */
}

.sidebar-right #content {
   margin-right: 200px; /* width of #sidebar-right */
}

.two-sidebars #content {
   margin-left: 200px; /* The width of #sidebar-left */
   margin-right: 200px; /* The width of #sidebar-right */
}

this is working great for me and it requires no math at all.

thoughts?