Removing White-space after using “top” tag in CSS

Question

I am working on This site!! , and I'm having a little problem.

I know it may be pretty basic, but I cannot seem to get it to work :/

At the bottom of my site, at the footer I have a whitespace which I want removed. I have tried using the margin-bottom to no avail

Is there something else I should be doing?

This is my Code:

HTML

 <div id="footer">
    </div>
    <div id="bottombanner">
    </div>

CSS

    #footer{
    background: url("../images/footer.gif") no-repeat top left; 
    height: 370px;
    overflow: hidden;
    z-index: 1000;
    position: relative;
}

    #bottombanner{
      background-color: rgb( 22, 47, 66 );
      left: 0px;
      width: 100%;
      height: 60px;
      top: -31px;
      z-index: 1;
      position: relative;
 }

Any Help would be greatly appreciated!! Thanks!

Answer 1

Change in #bottombanner top to margin-top .

#bottombanner{
      background-color: rgb( 22, 47, 66 );
      left: 0px;
      width: 100%;
      height: 60px;
      margin-top: -31px;/*this*/
      z-index: 1;
      position: relative;
}

Answer 2

replace the property top:-31px to margin-top:-31px; for #bottombanner