Background colour extends too far vertically

[DiscoBiscuit]

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: 100px;
height: 150px;
background-color: #00A887;
opacity: 0.5;
filter:Alpha(opacity=50);
border-top: 1px solid #cccccc;
z-index: 2;
position: relative;
bottom: 100px;
}

[Nerdygeek]

Im only new to CSS and HTMl, so it's a shot in the dark..

But could using a container with a set margin fix this problem?


#container {
width 700px;
height: 800px;
margin: 3em auto;

I think it would, but you would have to go back and add it to your HTML.

BTW cool name DiscoBisuit :-)