Hi,

I want to build a section of may page that's like this:



It all sits in a div layer called #mainarea, in between #toparea and #footer.

I want the #partners layer to always sit at the bottom of the #mainarea layer, whether or not the #sidebar layer is longer or shorter than #pagecontent. However, I want it no lower than the lowest point of the sidebar layer if the sidebar is longer.

I've been fiddling about with this all morning, can anyone help? More importantly, I hope you can understand what I'm on about!

Thanks in advance,

Scott.

You need to set layers to float left and right, use z indexs, set your bottom layers postition as relative or inherit and also use a contanier to contain your layers.

I have a container, it's #mainarea. I don't want to used z-indexes as I don't want the layers to ever overlap.

At the moment I've got the #pagecontent and #partners floating left and the #sidebar floating right.

For now I've added a clear:right to the #partnersites in order to keep it away from the #pagecontent layer but obviously that's not what I'm after in the end.

I'm not a designer, but I have that tiny little voice in my head telling me to look for position:relative and bottom:XX px

Maybe it could resolve your issue.

Cheers, that does it but now I'm left with an ugly white space at the bottom of the page. Anyone know how to get rid of that?

It has to do something with Xhtml.

Ahh come on, don't be so cryptic! If I wanted clues I'd have done a crossword!

I basically want to hide the bottom 130px or so of my page.

I'd say that if the div is aligned at the bottom, it's on purpose that there is a blank gap up him...

Can you give us a link, or post the code.
It's hard to visualize without it...

Please see http://www.lsi-gifts.co.uk/v1

Thanks for your help.

Try to remove the "position:relative" and "z-index:-1" in the #mainarea section.
It revealed the content of your page to me.

I did it on firefox. I can not check them on ie as I'm working under linux.
So, I don't know how it would render in IE.

Yeah I added that just before posting the link then got called away. I added it as the background image was overlapping the footer on shorter pages (not that I have any shorter pages at the moment but always best to try and sort out any issues before they become a problem).

Any ideas on the white space at the bottom?

Yep...
In #mainarea still, the "margin:10px 0px -130px;" is the culprit.

It tells the browser that the footer should be placed 130px higher than the bottom of the container.

Try margin:10px 0px -40px;
Looks better for me.

#margin:0; should do it