Solving the magical footer issue

If you have a quick look at this website that I am designing: http://milabalami.com

The blackline seen in the footer is the one that I want to fix. Is there anyway that I can put that footer at the bottom of the content (wrapper) of the page? I 开发者_如何转开发have not done any webdesigning since the golden days of tables so CSS is quite new to me.

Anyone that could assist this old man? Please be specific in any reply as I am new to CSS styling...

you mean that you want to eliminate the gap between wrapper and the black line? If yes just change the #blackbox2 margin to margin: 0 auto 15px;

You have:

#blackbox2 {
background-color: black;
bottom: 0%;
height: 33px;
margin-bottom: 15px;
margin-left: auto;
margin-right: auto;
margin-top: 11%;
position: relative;
top: auto;
width: 900px;
z-index: 12;
}

Try removing margin-top: 11%. This matches to '11% of the parent height', which is why your blackbox2 is so far from the wrapper above it.

Does this solve your problem — http://www.cssstickyfooter.com/ ?