Problems understanding positioning

  I posted this over on the MS newsgroups and it seems I'm not alone.  So here goes:

  On my site I have thre main areas, at the top is a header, then the body of my article, and then at the bottom is a footer.  Simple stuff.  Also at the bottom (for accessability reasons) is a nav bar, which I later position using CSS.  The resulting page should look like...

-------------------------------------
|                                   |
|            header area            |
|                                   |
-------------------------------------
|        |                          |
|        |                          |
|  nav   |                          |
|  bar   |                          |
|        |                          |
|--------|                          |
|                                   |
|                                   |
|                                   |
|               main                |
|                                   |
|                                   |
|                                   |
|                                   |
|                                   |
|                                   |
|                                   |
-------------------------------------
|                                   |
|            footer area            |
|                                   |
-------------------------------------

  I want the nav bar to appear below the header, who's size I don't know. So in order to make that happen I wrap the nav bar and main article in another div. As I understand it, this should make the 0,0 point lie just below the header, so then if I position the nav bar at 0,0, I should be all set.  As a result the basic document layout looks something like this:

<DIV class=header>...</DIV>

<DIV class=article>

<DIV class=main>...</DIV>
<DIV class=nav>...</DIV>

</DIV>

<DIV class=footer>...</DIV>

  There's something about this that I simply don't understand. If I use a stylesheet something like:

.nav { POSITION:absolute; TOP:0px; RIGHT:0px; }

  what happens is something like this:

-------------------------------------
|        |                          |
|  nav   |   header area            |
|  bar   |                          |
|        |                          |
|        |                          |
-------------------------------------
|                                   |
|                                   |
|                                   |
|                                   |
|                                   |
|                                   |
|               main                |
|                                   |
|                                   |
|                                   |
|                                   |
|                                   |
|                                   |
|                                   |
-------------------------------------
|                                   |
|            footer area            |
|                                   |
-------------------------------------

  The nav bar gets positioned absolute as if it's not inside main at all. Now I found a workaround, but the solution baffles me...

.article { POSITION:relative; }

  Do that and poof, the nav bar goes where I want it.

  Ok, but why?  Why should the positioning style of my parent block have any effect whatsoever on the children?


  I also found a nasty bug in IE5.5.  Originally I used padding to move the left side of the main article in to leave room for the nav bar. However if you do this, something utterly bizzare happens, the 0,0 point for the _parent_ DIV (article in this case) becomes the upper left of the content area of the text - in other words, pushed in to the left by the padding! I got rid of the padding and just moved the block, and that fixed that.  The pages now work in all of the CSS browsers - and all the non-CSS ones too!

  However this left me with another problem. By using padding-left and padding-right I was able to get the article text to resize "properly", that is, stay in a column in the middle of the screen nicely indented from the sides. Now that I've instead moved the block with LEFT:8.5em, what do I do with the right side so that it's also indented as before?  Margin?  Padding again?

Maury