Background colour extends too far vertically

[st00dent]

Hi,

I want to use two overlapping sections in the footer of my page, giving a transparency effect. This is working fine, however as my footer is positioned relatively (bottom: 100px), the background colour of the page sticks out 100px below it. Is there a way I can cut this off without affecting the layout in any other way?

Any advice would be appreciated, thanks.

html, body {
margin: 0;
padding: 0;
height: 100%;
margin: 0 0 1px;
background-color: #333333;
}

#footer {
width: 150%;
min-height: 150px;
height: 150px;
background-color: #00A887;
opacity: 0.5;
filter:Alpha(opacity=50);
border-top: 1px solid #cccccc;
z-index: 2;
position: relative;
bottom: 100px;
}

 

[st00dent]

Hi. I'll try to explain it a bit better. My current layout is shaped like a capital letter I. I have a simple header at the top and footer at the bottom, separated from the middle by a horizontal line. The middle section users 80% width of the page.

What I'm trying to to is extend the middle section vertically, so that it overlaps both the header and the footer, giving transparency effects with z-index. However, if I relatively position it higher than normal, a white gap appears at the bottom of the page to compensate.

I've tried your suggestion but so far been unable to get it working with the z-index properly. I hope that makes it easier to understand.