Float Right with z-index

Hello,

I know enough about css and html now to be dangerous to myself. Which means I am still wet behind the ears. So here is the problem.

I cannot seem to get my div to float right with a higher stacking order (z-index).

Here is a link to see: http://www.lookupdisplayads.com/stage

Basically I have 4 divs.
1 div is the main container for everything (width 100%).
1 div is set to float left with a z-index:10. (has a background image)
1 div is set to float right with a z-index:11. (has a background image)
1 div is set to width 100% with a javascript scroller in it.

Any help would be much appreciated. Thanks.

* {
margin:0px;
padding:0px;
}

body {
background-color:#FFFFFF;
}

#header_wrap {
background-color:#000000;
margin-left:auto;
margin-right:auto;
min-height:200px;
padding:0;
position:relative;
text-align:center;
width:100%;
}

#scroller {
float: right;
min-height:200px;
padding:0px;
text-align:right;
width:100%;
}

#logo {
background-image: url(images/h_logo.png);
position: absolute;
z-index:10;
float: left;
min-height:200px;
padding-top:3px;
width:400px;
height:200px;
}

#logo_r {
background-image: url(images/h_logo_r.png);
position:absolute;
float:right;
min-height:200px;
padding-top:3px;
width:400px;
height:200px;
z-index:11;
}

#nav {
background-color:#8dc73f;
height:30px;
width:100%;
}

 

What are you trying to achieve here, meaning what look do you want?

You say float:left but then position:absolute which doesn't make sense afaik.

If I can understand what look you are trying to achieve I can advise on a suitable layout maybe. I don't think you need the Z-index or positioning.

 

Basically I am looking to:

have a javascript scroller that scrolls the width of the page. (I have that)
I am then putting a seperate png file on both the left and right.
those png files are set to a higher stacking order (z-index)

So basically it makes the scroller look like it has a fade in from the right and a fade on the left.

My problem is that if i do not set position: absolute it knocks my scroller down.

and it jsut refuses to let the png for the right side float right.

I have confused myself crazy at this point, so thanks for helping.

 

Oh Right so you just want the left and right images ontop of the 100% width scroller.

Well you could do something like this:

#scroller { width:100%; min-height:200px; }
#leftimg { position: absolute; top:0; left:0; background:url(imgr.png); width:Xpx; height: Xpx; z-index: 20;}
#rightimg { position: absolute; top:0; right:0; background:url(imgl.png); width:Xpx; height: Xpx; z-index: 20;}

So basically when positioning, you use top:Xpx left:Xpx; right:Xpx; bottom:Xpx to position the element where you want. Hence you need right:0; to position it to the right of the page.
Leave out the floats, you should use these when youre not positoning absolute really.

So the changes you need is to remove the floats, and use left:0; for the left DIV and right:0; for the right DIV

 

That sounds like an easy fix. I will give it a try and let you know how it goes.

Again Thank You for the help it is always appreciated.

 

Of course it worked!

Thank You again.

It just goes to show, I have to simplify my thoughts. I am definitely over thinking things at this point.