z-index and postining relative (absolute)

I am not the best at CSS......

As I understand z-index works for both absolute and relative positioning. I can only get it to work for absolute positioning, but want it to work for relative instead.

The container tag has a graphic as background and I want it to be stacked at the top and be seen. IE displays the graphic as I want without the use of z-index, but no such luck with firefox or opera.

If I change the container tag from position: relative; to position: absolute; then it is stacked correctly, but this means that all postioning is messed up.

Any help gratefully appreiciated

the html is:

<div id="container">

<div id="main">

  <div id="content"></div>
	
    <div id="col-l">	 </div>
</div>


<div id="col-r"></div>


</div>

<div id="footer"></div>

HTML:

the CSS is

div#container{
width: 760px;
z-index:5;
background-image: url(../images/mid.jpg);
background-repeat: repeat-y;
border-top-style: dashed;
border-right-style: dashed;
border-bottom-style: dashed;
border-left-style: dashed;
position: relative;
}
div#main{

float: left;
width:615px;
z-index:4;
position: relative;
}


div#content{

float: right;
width:399px;
z-index:3;
position: relative;
position: relative;
padding-left: 15px;
padding-right: 15px;
padding-top: 0px;


}

div#col-l{

float: left;
width:160px;
z-index:2;
position: relative;
padding-left: 10px;
padding-right: 10px;
padding-top: 10px;

}


div#col-r{


float: right;
width:140px;
z-index:1;


position: relative;


}


div#footer{
width: 780px;
background-image: url(../images/bot.jpg);
background-repeat: no-repeat;
float: left;
}

 

This is not a z-index issue, but rather an uncontained float issue. Floats are not in the flow. As far as #container is concerned, it has no content, therefore no height. IE quite wrongly encloses float descendents as long as the container has hasLyout==true.[1]

See my sig line for "enclosing float elements" for a demo of the various clearing/enclosing float methods.

cheers,

gary

[1] See On Having Layout ….

 

Thanks Gary - Your a legend!!

Like I said, I'm not the best at CSS - and this isuue had been bugging me for a while.

Nice and and easily explined to an easy solution in your sig note.

Cheers,

Joe