Welcome to WebmasterWorld Guest from

Forum Moderators: not2easy

Message Too Old, No Replies

z-index backgrounds with floats and semi-elastic layout



12:55 pm on Jan 6, 2009 (gmt 0)

5+ Year Member


I am trying to find out out if it is possible to combine the effects of these two pages.


index is the page layout as I would like it, but combined with the background of index-test.

CSS3 multiple backgrounds are out due to limited compatibility.

I have tried using a z-index, but as far as I can make out from the w3 site, z-index only works on 'positioned' (not floated) elements. Is this the case?

Due to the elasticity of #leftChunk's content, my cloud background also has to have an elastic 'middle section and left and right parts floated left and right.

There does need to be some overlap of the content and left & right backgrounds.

CSS is here:

Can anyone think of a better solution to this problem?

[edited by: swa66 at 2:44 pm (utc) on Jan. 6, 2009]
[edit reason] No personal URL, please see ToS [/edit]


2:38 pm on Jan 6, 2009 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member

Hi waterox,

Please read the Forum Charter [webmasterworld.com] In regards to the posting of url's.

If you can still edit your post, please remove them. If not a mod will be along to remove them.

In the forum Charter you will read about how to post your code so that we can view your code and help you out with your problems.

You can post your css and your (x)html for us to go through.

Also, please make sure you have the correct DTD as well as making sure that your page validates before you post your code.


4:47 pm on Jan 6, 2009 (gmt 0)

5+ Year Member

Sorry about the posting of url's.
This is as simple as the code can get to render the layout I need.
Firstly, my main page layout:

{margin: 0;}
html, body
{height: 100%; margin: 0 auto; padding: 0; background: #fff;}

/* hack for ie6 770px fixed if no js, or will stretch if js enabled */
* html #bandMain {
width: 780px;
width: expression((document.body.clientWidth>1250) ? "970px" : ((document.body.clientWidth>800) ? "auto" : "780px"));
/* hack also needed for sticky footer */
* html #footer {
width: 770px;
width: expression((document.body.clientWidth>1250) ? "970px" : ((document.body.clientWidth>800) ? "auto" : "770px"));
#bandMain { margin: 0 auto; padding: 0; min-width: 780px; max-width: 970px; min-height: 100%; height: auto !important; height: 100%; background: #f6f3e1; }

#leftChunk { padding: 0 400px 30px 40px; margin: 0 0 80px; 0; background: #f6f3e1; border: 1px solid red; height: 300px;}

#rightChunk { background: #fff; float: right; padding: 15px 10px 15px 10px; width: 310px; border: 1px solid #ccc; margin: 50px 10px 80px 10px; }

.footer, .push { height: 250px; clear: both; /* .push must be the same height as .footer */ }
.footer { min-width: 770px; max-width: 970px; }

<div id="bandMain">wrapper
<div id="rightChunk">rightChunk</div>
<div id="leftChunk">leftChunk</div>

<div class="footer">footer</div>


I then need to display under this layout (adding a higher z-index to bandMain obviously), the following:

<div id="bandMain">
<div id="bgContainer">
<div id="bgRight"></div>
<div id="bgLeft"></div>

like this:

#bgContainer { z-index: 10; background: url(../images/LTT-middle.gif) repeat-x; height: 18px;}
#bgLeft { z-index: 10; float: left; background: url(../images/LTT-left.gif) no-repeat top left; height: 505px; width: 280px;}
#bgRight { z-index: 10; float: right; background: url(../images/LTT-right.gif) no-repeat top left; height: 505px; width: 280px;}

Individually they work. Together they do not. Is this possible with z-index or is there another way?


2:03 pm on Jan 7, 2009 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member

With z-index, what you are actually doing is creating layers with your images.

Right now, all of your images are on the same layer, they are all 10's which put them at the same spot.

What you need to do is change your layer numbers. The lower the number the lower to the bottom the image is. So if you want to put them over each other in a certain manner you would assign them different numbers.

Say, like 1, 2, 3. One being the bottom, 3 being the top and 2 being the middle.

I'm not sure if this will help you or not. You could also look up z-index tutorials on google.

Here is a start for you [google.com]

I hope that this helps you out a bit! :)


2:31 pm on Jan 7, 2009 (gmt 0)

5+ Year Member

What I wanted to do was to place left and rightChunk divs independently and on top of the bg divs, which were to be floated and on a lower z-index than the content.

I found a solution using an extra 3 full-width wrappers for the bg:

#bgMiddle { background: url(../images/LTT-middle.gif) repeat-x top; height: 18px; }
#bgLeft { background: url(../images/LTT-left.gif) no-repeat top left; height: 505px; }
#bgRight { background: url(../images/LTT-right.gif) no-repeat top right; height: 505px; }

The content is then placed inside and can be positioned as normal.



6:49 pm on Jan 7, 2009 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member

Great to see that you got this working!

Featured Threads

Hot Threads This Week

Hot Threads This Month