CODEWITHSUNDEEP
cssz-indexcss-position
Devonanne
Devonanne

Reputation: 1

Problem using z-index on two relatively positioned divs

I have found a lot of "almost" answers for this question, but nothing to help my specific problem...

I have a web page with a centered #content-wrapper that is 1024px wide. What I would like is to have another div positioned behind this wrapper that is also centered and slightly wider - reason being that I have a graphic I want running down the left side of the #content-wrapper, but I need my #content-wrapper to stay 1024px wide. I can't put this graphic in the body background or absolutely position it, because I need it to move along with the #content-wrapper when the browser is resized.

So my problem is, I have relatively positioned both the #content-wrapper and the larger div, which is called #prints, and applied z-indexes to both. However, unless I apply absolute positioning to #prints, it acts like a floated element and jumps above my #content-wrapper. I have tried setting the body position to relative, but that doesn't help.

I need to know if there's a way to do this, or if I am just frustrating myself trying to do something that won't work?

My (simplified) markup is below. HTML:

<body>

<div id="prints"></div>

<div id="content-wrapper">

<!-- Content here -->

</div>

</body>

CSS:

#content-wrapper {
width: 1088px;
min-height: 800px;
height: auto;
overflow: hidden;
margin: 0px auto 0px auto;
position: relative;
z-index: 99;
}

#prints {
width: 1212px;
position: relative;
z-index: -99;
margin: 0px auto 0px auto;
height: 881px;
background-image: url(images/bg-prints.png);
}

Upvotes: 0

Views: 1062

Answers (2)

IMI
IMI

Reputation: 2469

It sounds like you want something like this. http://jsfiddle.net/PD6HK/ By nesting the #content-wrapper inside the #prints you accomplish the following: 1. #prints is located behind #content-wrapper 2. #prints is slightly wider than #content-wrapper 3. Both #prints and #content-wrapper are centered and move with the browser window

If it was me, I would try something like this http://jsfiddle.net/PD6HK/1/, that sounds like it basically does the same thing you wanted above but without the #prints . Granted the content will not be "exactly" centered due to the padding on the #content-wrapper .

Upvotes: 0

kei
kei

Reputation: 20491

Why not do it like this?

<div id="prints"> //the div behind
  <div id="left-side-graphic"> </div>
  <div id="content-wrapper"> </div>
</div>

and have the two divs inside float left, and 'prints' sized accordingly so the divs stay inline.

Upvotes: 1

Related Questions