Using Z-index, margin not working to push div away from another

Question

I have edited this post with my question writen in a more simple way to understand. Please see below.

Some CSS I am using:

#wing_right
{
  background-image:url("../images/poppadom.png");
  height:678px;
  margin-right:-60px;
  margin-left: 500px;
  position:fixed;
  right:0;
  top:240px;
  width:387px;
  z-index:50;  
} 

Easier version of the question to understand. I hope.

Following is a diagram representation of my site. -> |LW|CN|RW| LW = Left wing CN = Content RW = Right wing. The left and right wing have very simliar CSS. See the CSS above only difference being the image and its attached to the left wing. The content is below in terms of z-index and can't be covered by the wings. Like the very simple diagram the LW and RW move with browser resizing which is what I want. However when you make the browser window smaller I need something to prevent the LW and RW covering the content. Both wings are on the same z-index and content is on a lower z-index.

Answer 1

That element is positioned not relatively or statically so it's not "in the flow" and thus the margin won't affect any other div. Please post a full example, as this is a very visually involved issue.

Answer 2

Does the lower level content have a fixed width or is it automatic? If it's automatic, that sounds like the correct behavior. You could apply a minimum width to the layer you do not want "smushed" by the left and right side images.

Answer 3

Try giving the content of the page a z-index of 100. Higher numbers should show up in front of lower numbers.