Footer not displaying properly in html

Question

I am using two column layout.One for Main content and one for sidebar

In html I am using the following code

<div id="content">
     <div id="main-content">
       -----------
       -----------
     </div>

     <div id="sidebar">
      -----------
      ----------
      </div>

 </div>

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

CSS file Consist of the following code

  #content
{
padding-top:100px;
padding-bottom:50px;
width:1000px;
    margin:0px auto;

}

  #main-content
{

width:720px;
padding-top:250px;
    padding-bottom:30px;
    padding-right:20px;
position : absolute;
}

 #sidebar

{
float:right;
width:270px;
    padding-top:250px;
    padding-bottom:30px;

}

 #footer
{
background: url(../images/footer.jpg) repeat-x;
    width:100%;
clear:both;
    margin:auto;

}

The footer code is displaying in the middle of the page , probably at the end of the sidebar you can see here. Footer is in Black color.

Answer 1

Remove padding-right: 20px and position: absolute properties from div.#main-content