Working with z-index

HTML & CSS
1

Hi Guys,

i am crweating a webpage that has a lot of pgrahics in the top section so i am using zindex to overlap some divs

my code works but on one of the divs i have had to set a negative margin as i wanted it to be within a parent div that was positions at a different level

here is what i am trying to do

my css looks like this


#header {
	background: url(../images/header.png) no-repeat;
	width: 1083px;
	height: 384px;
	position: absolute;
	z-index:1;
}

#content {
	background: #ffffff;
        border-right: 1px solid #000000;
	border-left: 1px solid #000000;
	border-bottom: 1px solid #000000;
	width: 978px;
	height: auto;
	margin-left: 66px;
	position: absolute;
	z-index:2;
	top: 384px;
	margin-bottom: 30px;
}

#left-content {
	background: url(../images/main-bg.gif) repeat-y;
	width: 947px;
	height: auto;
	position: relative;
	z-index:3;
	top: -75px;
	overflow: hidden;
	padding: 0px 0px 20px 30px;
}

my html


<div id="header"></div>
   <div id="content">
        <div id="left-content">
            <p>content goes here</p>
          </div>
   </div>

the problem is the left-content has a top: -75px;

this is a child of ‘content’ and should expand ‘content’ as text is added into it.

The div expands but has an extra 75px expansion which i dont need

any ideas?

2

but there seems to be an extra 75px space in content at the bottom, i am guessing this is because of the negative margin in left-content
Hi,
That was because of the relative positioned offset value top:-75px. It only moves the box visually, it still resides in it’s original location as far as other elements are concerned.

To be honest I would not use AP on the header or anywhere else with the current code you are working with. I would use floats and a static block for the header.

Basically what I am doing is nesting both columns in a div called Content. I am setting overflow:hidden on the Content div to contain the floated columns. Then I am dragging the Content div up over the header with a negative top margin instead of dragging the left column up. If I tried to drag the #left column up it would get clipped since Content is overflow:hidden. Then I am setting a 75px top margin on the #main column to push it back down.

By floating both columns I am able to bring #main first in the source order.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Demo</title>

<style type="text/css">
body {
    margin:0;
    padding:0;
    font:100&#37;/1.4 arial,helvetica,sans-serif;
}
#wrap {
    width:1083px;
    margin:0 auto;
    background:red;
    border:1px solid #000;
}
#header {
    height:383px;
    padding-top:1px;
    background:#000 url(../images/header.png) no-repeat;
    color:#FFF;
}
#content {
    position:relative;/*auto stack*/
    width:100%;/*haslayout ie6*/
    overflow:hidden;/*contain floats*/
    margin-top:-75px;
}
#main {
    float:right;
    width:681px;/*683px w/borders*/
    margin:75px 0 0 0;
    border:1px solid #FFF;
}
#left {
    float:left;
    width:400px;
    background:#CCC url(../images/main-bg.gif) repeat-y;
}
p {margin:1em;}
</style>

</head>
<body>

<div id="wrap">
    <div id="header">
       <p>Header</p>
    </div>
    <div id="content">
        <div id="main">
            <p>Main Content</p>
            <p>Main Content</p>
            <p>Main Content</p>
            <p>Main Content</p>
            <p>Main Content</p>
            <p>Main Content</p>
            <p>Main Content</p>
            <p>Main Content</p>    
        </div>
        <div id="left">
            <p>Left Content</p>
            <p>Left Content</p>
            <p>Left Content</p>
            <p>Left Content</p>
            <p>Left Content</p>
            <p>Left Content</p>
            <p>Left Content</p>
            <p>Left Content</p>
        </div>
    </div>
</div>

</body>
</html>
3

see this image http://i32.tinypic.com/168hqgz.jpg

left-content div is inside content, and content is supposed to grow to the same height as left-content when text is added into left-content

but there seems to be an extra 75px space in content at the bottom, i am guessing this is because of the negative margin in left-content

basically i want to get rid of that extra 75px in content at the bottom and would like content and left-content to stop growing at the same point

hope that makes sense

4

That last bit isn’t really clear (at least to me).

5

okay just realised something

if i add

position:absolute;

to the content (red box) it seems to appear the way i want it, so that the grey box appears outside of it and the redbox is positions right under the header

however this makes my wrapper only expand until the header and does not go around the content div? :injured:

6

Hi Rayzur thanks for the reply

i tried that but you have the red area as a wrapper but on my website the red content goes beneath the header.

the header has some transparent bits onit so i cant have it go underneath the header

i have tried this instead


#header {
	background: url(../images/header.png) no-repeat;
	width: 1083px;
	height: 384px;
}

#content {
	background: red;
        border-right: 1px solid #000000;
	border-left: 1px solid #000000;
	border-bottom: 1px solid #000000;
	width: 978px;
	margin-left: 66px;
	margin-bottom: 30px;
}

#left-content {
	background: url(../images/main-bg.gif) repeat-y;
	width: 947px;
	height: auto;
	position: relative;
	overflow: hidden;
	padding: 0px 0px 20px 30px;
	margin-top: -75px;
}


<div id="wrapper">
  <div id="header">
  </div>
     <div id="content">
        <div id="left-content">
            <p>text goes here</p>
         </div>
       
     </div><!--closes content-->
</div><!--closes wrapper-->

this works in ie6 and ie7 but in the other browsers the content (red div) also moves up with the left-content :shifty:

it doesnt allow me to move the greybox outside of the red box but still be a child of the red box and allow the red box to expand to the same height as the greybox

hope that makes sense :eek:

7

It’s margin collapse and you should just add either a 1px padding to Content or a top border. No need for absolute positioning.


#content {
    background: red;
[B]    border: 1px solid #000000;
    border-top:1px solid red;[/B]
    width: 978px;
    margin-left: 66px;
    margin-bottom: 30px;
}