Hello,

I'm aiming to get a footer in a footer, in a way. I need the buildings footer to stay exactly how it is, that's perfect but then footer2 needs to also be on the bottom but overlap the orginal footer. How would I go about doing this? You can see the website here; teamshift.co.uk

style.css

#footer {
     background: url("../images/footer.png") repeat-x scroll center top transparent;
     bottom: 0%;
     clear: both;
     height: 370px;
     margin: -380px 0px 0px 0px;
     min-width: 100%;
     position: relative;
}

.footer2 {
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#464646', endColorstr='#5a5a5a'); /* for IE */
        background: -moz-linear-gradient(center top , rgb(90, 90, 90), rgb(70, 70, 70)) repeat scroll 0% 0% transparent;
        background: -webkit-gradient(linear, center top, center bottom, from(rgb(90, 90, 90)), to(rgb(70, 70, 70)));
        border-top: 2px solid rgb(90, 90, 90);
        -moz-border-radius-topleft: 16px;
        border-top-left-radius: 16px;
        -moz-border-radius-topright: 16px;
        border-top-right-radius: 16px;
    width: 950px;
    height: 29px;
    padding-top: 20px;
        margin-right: auto;
        margin-left: auto;
    text-align: center;
    font-size: 10px;
    font-family: Verdana;
    color: #888888;
}

footer.php

<div class="container" id="footer">
<div class="footer2">dfdfd</div>
<p class="copyright"></a></p>
</div>
</body>
</html>

I would probably do something like this with my markup

<div class="container" id="footer">
    <div class="footer2">
        <div class="footer2data">
            <p class="copyright"></p>
        </div>
    </div>
</div>

And then the CSS

.footer2 {
    position: absolute;
    width: 100%;
    margin:20px 0 0 0;
}

.footer2data {
    background: -moz-linear-gradient(center top , #5A5A5A, #464646) repeat scroll 0% 0% transparent;
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
    border-top: 2px solid #5A5A5A;
    color: #888888;
    font-family: Verdana;
    font-size: 10px;
    height: 200px;
    margin-left: auto;
    margin-right: auto;
    padding-top: 20px;
    text-align: center;
    width: 950px;
}