2 replies [Last post]
Last seen: 13 years 9 weeks ago
Joined: 2007-02-23
Posts: 66
Points: 0

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").


StudioProfessor (847)987-2519


Software or Hardware got you Confused?
I can get you back on track. I teach:

-Ableton Live
-AKAI MPC 4000, 2500, 2000, 1000, 500
-Digital Audio Fundamentals
-Analog Audio Fundamentals

I understand everything that these powerful software and hardware pieces can do, and can show you how to do it in a way that's easy to understand. Including:

-Importing/Exporting Audio and MIDI, Project Archival, etc.
-Using VST Instruments and Effects
-Controlling software or hardware using MIDI devices
-Controlling Hardware (Synthesizers, Samplers, Effects Racks etc.) via your DAW (i.e. via Cubase, Ableton or your MPC)
-Using Ableton's Session and the Arrangement view
-Using Ableton's built in Samplers, Synthesizers, Effects, etc. (Simpler, Sampler, Impulse, Operator, etc.)
-DJing with Ableton (tempo/beat matching ("warping" etc.)), controlling Ableton's DJ functionality with a MIDI enabled DJ mixer, etc.)
-Choosing appropriate settings for Samplers, Synthesizers and Effects
-Anything else that you want to do

Manuals are often written using confusing technical jargon. If you can understand them, that's great! They may be the only resource you need. But if you're confused and getting stuck, then let me explain things in plain english for you.

My hourly rate is $30. I can come to you, or you can come to my home studio in Lake Bluff. If I come to you, I charge an additional $20 to cover my transportation cost and time. I serve the entire Chicagoland area.

To make an appointment, or for answers to any questions you may have, please call or email:

[email protected]


#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
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;}

Chris..S's picture
Last seen: 8 years 38 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

By defaullt all positioned

By defaullt all positioned elements go in front of all non-positioned elements. position:relative gives an element position without changing its in-flow location. Also once an element has position it can be assigned a z-index.

#main, #footer { position: relative; }

should do the trick.

Last seen: 13 years 9 weeks ago
Joined: 2007-02-23
Posts: 66
Points: 0

Beatiful! Thanks a lot

Beautiful! Thanks a lot Chris! :thumbsup: