[Solved] how to manage a positioned div's stacking order among unpositioned divs

OK, I'm majorly stumped here.

On my website, www.studioprofessor.com/lessonsandtraining.html , I have a blue bar on the left side of the viewport. This blue bar is the y-repeating background of

. Wrapper contains the entire page's contents, so wrapper's background goes behind any page element that it intersects with. This works fine, no problems.

I want to make a blue bar on the right side of the viewport as well, which also goes behind any page element that it intersects with. I created

for this purpose, with a y-repeating background. Since I need to position this div on the right edge of the screen, I had to use absolute positioning.

However, nothing else in rmargin's stacking context (i.e. the first level inside of

) is positioned (it's designed to "flow" with the page content and viewport size). Therefore, absolute positioning

makes rmargin go in FRONT of everything in its stacking context. I need it to go behind, not in front.

The only way I can think of getting around this is by absolute positioning everything in rmargin's stacking context. However, I'm concerned that this absolute positioning will ruin my page's liquidity.

I've tried absolute positioning everything in rmargin's stacking context (i.e.

and

), but I can't figure out how to do it without screwing up my page layout.

Does anyone know how I can get "rmargin" to go in front of "wrapper" but behind everything else, while keeping "rmargin" pinned to the right side of the viewport and extending to the bottom of "wrapper"?

Thanks, any help would be much appreciated

The code that I have online at my website right now does not include

, since I can't get it to work right. Here's the code, including "rmargin" (it's the first div inside of "wrapper").

HTML

StudioProfessor (847)987-2519

CSS

#navcontainer {
background-color: white;
padding-top: 5px;}

#navlist {
text-align: center;
padding: 3px 0;
margin-left: 0;
margin-top: 0px;
border-bottom: 1px solid #778;
font: bold 13px Verdana, Arial, Helvetica, sans-serif;}

#navlist li {
list-style: none;
margin: 0;
display: inline;}

#navlist li a {
padding: 3px 0.5em;
margin-left: 3px;
border: 1px solid #778;
border-bottom: none;
background: #DFF1FA;
text-decoration: none;}

#navlist li a:link { color: #667; }
#navlist li a:visited { color: #667; }

#navlist li a:hover {
color: #565669;
background: #B7E1F5;
border-color: #778;}

#navlist li a#current {
background: white;
border-bottom: 1px solid white;}

body {
margin: 0;
padding: 0;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10pt;}

div.header {
background: white url("images/headerbg.jpg") repeat-x 0 0;
}

#contentmargin {
margin-left: 10%;
margin-top: 0px;
margin-right: 10%;}

h3 {
text-align: center;
font-size: 12pt;}

html, body, #wrapper {
min-height: 100%; /*Sets the min height to the
height of the viewport.*/
width: 100%;
height: 100%; /*Effectively, this is min height
for IE5+/Win, since IE wrongly expands
an element to enclose its content.
This mis-behavior screws up modern
browsers*/
margin: 0;
padding: 0;}

html>body #wrapper {
height: auto; /*this undoes the IE hack, hiding it
from IE using the child selector*/
}

#wrapper {
background: url("images/marginrepeater4.jpg") repeat-y 0px 0px transparent;
position: absolute;
top: 0;
left: 0;
}

#rmargin {
background: url("images/marginrepeater5.jpg") repeat-y 0px 0px transparent;
position: absolute;
top: 0;
right: 0;
margin: 0;
padding: 0;
min-height: 100%;
width: 9px;
height: auto;

}

#main {

height: auto;
padding: 0;
padding-bottom: 2em; /*Keeps content above footer. Originally
used margin, but a bug in Opera7 seemed
to add spurious margin, pushing the
footer beyond the viewport even with
short content. */
width: 100%;
margin: 0 auto;}

#footer {
position: absolute;
bottom: 0;
width: 100%;
margin-left: 0%;
font-size: 9px;}

#footer p {
margin-bottom: 0;
text-align: center;}