css position problem

Good Morning, I have a css code which make me crazy because I can't correct it ! This is the code :

<div id="main_body">

    <div class="left_panel round">
        <div class="sub_left_panel round">
            <table id="menu" width="100%" cellspacing="0" cellpadding="1">
                <tr class="header"><td colspan="2">Main Menu</td></tr>
                    <tr class="sub_header"><td colspan="2">Links</td></tr>
                            <tr class="options"><td width="20"><img src="css/images/icons/house.png" /></td><td style="padding-left: 0;">Home Page</td></tr>
                            <tr class="options thelast"><td width="20"><img src="css/images/icons/email.png" /></td><td style="padding-left: 0;">Messages</td></tr>
                        <tr class="sub_header"><td colspan="2" style="font-weight: bold; padding-left: 5px;" bgcolor="#E2E2E2">Settings</td></tr>
                            <tr class="options"><td width="20"><img src="css/images/icons/wrench.png" /></td><td style="padding-left: 0;">Account Settings</td></tr>
                            <tr class="options thelast"><td width="20"><img src="images/16x16/privacy.png" /></td><td style="padding-left: 0;">Privacy Settings</td></tr>
                        <tr class="sub_header"><td colspan="2" style="font-weight: bold; padding-left: 5px;" bgcolor="#E2E2E2">Your Baggage</td></tr>
                            <tr class="options"><td width="20"><img src="images/16x16/photo-album.gif" /></td><td style="padding-left: 0;">Photo Album(s)</td></tr>
                            <tr class="options"><td width="20"><img src="images/16x16/drafts.gif" /></td><td style="padding-left: 0;">Drafts</td></tr>
                            <tr class="options"><td width="20"><img src="images/16x16/music-beam-16.png" /></td><td style="padding-left: 0;">Music</td></tr>
                            <tr class="options"><td width="20"><img src="images/16x16/video.gif" /></td><td style="padding-left: 0;">Videos</td></tr>
                            <tr class="options thelast"><td width="20" style="padding-left: 15px;"><img src="images/16x16/files.png" /></td><td style="padding-left: 0;">Files</td></tr>
            </table>
        </div>
    </div>


    <div class="left_panel round">
        <div class="sub_left_panel round">
            <table id="menu" width="100%" cell开发者_开发知识库spacing="0" cellpadding="1">
                <tr class="header"><td colspan="2">Main Menu</td></tr>
                    <tr class="sub_header"><td colspan="2">Links</td></tr>
                            <tr class="options"><td width="20"><img src="css/images/icons/house.png" /></td><td style="padding-left: 0;">Home Page</td></tr>
                            <tr class="options thelast"><td width="20"><img src="css/images/icons/email.png" /></td><td style="padding-left: 0;">Messages</td></tr>
                        <tr class="sub_header"><td colspan="2" style="font-weight: bold; padding-left: 5px;" bgcolor="#E2E2E2">Settings</td></tr>
                            <tr class="options"><td width="20"><img src="css/images/icons/wrench.png" /></td><td style="padding-left: 0;">Account Settings</td></tr>
                            <tr class="options thelast"><td width="20"><img src="images/16x16/privacy.png" /></td><td style="padding-left: 0;">Privacy Settings</td></tr>
                        <tr class="sub_header"><td colspan="2" style="font-weight: bold; padding-left: 5px;" bgcolor="#E2E2E2">Your Baggage</td></tr>
                            <tr class="options"><td width="20"><img src="images/16x16/photo-album.gif" /></td><td style="padding-left: 0;">Photo Album(s)</td></tr>
                            <tr class="options"><td width="20"><img src="images/16x16/drafts.gif" /></td><td style="padding-left: 0;">Drafts</td></tr>
                            <tr class="options"><td width="20"><img src="images/16x16/music-beam-16.png" /></td><td style="padding-left: 0;">Music</td></tr>
                            <tr class="options"><td width="20"><img src="images/16x16/video.gif" /></td><td style="padding-left: 0;">Videos</td></tr>
                            <tr class="options thelast"><td width="20" style="padding-left: 15px;"><img src="images/16x16/files.png" /></td><td style="padding-left: 0;">Files</td></tr>
            </table>
        </div>
    </div>


    <div class="left_panel round">
        <div class="sub_left_panel round">
            <table id="menu" width="100%" cellspacing="0" cellpadding="1">
                <tr class="header"><td colspan="2">Main Menu</td></tr>
                    <tr class="sub_header"><td colspan="2">Links</td></tr>
                            <tr class="options"><td width="20"><img src="css/images/icons/house.png" /></td><td style="padding-left: 0;">Home Page</td></tr>
                            <tr class="options thelast"><td width="20"><img src="css/images/icons/email.png" /></td><td style="padding-left: 0;">Messages</td></tr>
                        <tr class="sub_header"><td colspan="2" style="font-weight: bold; padding-left: 5px;" bgcolor="#E2E2E2">Settings</td></tr>
                            <tr class="options"><td width="20"><img src="css/images/icons/wrench.png" /></td><td style="padding-left: 0;">Account Settings</td></tr>
                            <tr class="options thelast"><td width="20"><img src="images/16x16/privacy.png" /></td><td style="padding-left: 0;">Privacy Settings</td></tr>
                        <tr class="sub_header"><td colspan="2" style="font-weight: bold; padding-left: 5px;" bgcolor="#E2E2E2">Your Baggage</td></tr>
                            <tr class="options"><td width="20"><img src="images/16x16/photo-album.gif" /></td><td style="padding-left: 0;">Photo Album(s)</td></tr>
                            <tr class="options"><td width="20"><img src="images/16x16/drafts.gif" /></td><td style="padding-left: 0;">Drafts</td></tr>
                            <tr class="options"><td width="20"><img src="images/16x16/music-beam-16.png" /></td><td style="padding-left: 0;">Music</td></tr>
                            <tr class="options"><td width="20"><img src="images/16x16/video.gif" /></td><td style="padding-left: 0;">Videos</td></tr>
                            <tr class="options thelast"><td width="20" style="padding-left: 15px;"><img src="images/16x16/files.png" /></td><td style="padding-left: 0;">Files</td></tr>
            </table>
        </div>
    </div>


</div>

That is the main body code. This is the main body css code

/* Start Mian Body */

    div#main_body
    {
        width: 900px;
        position: absolute;
        padding-top: 100px;
        z-index: -1;
    }

    div.left_panel
    {
        position: relative;
        left: -10px;
        width: 200px;
        background: #0099CC;
        padding-top: 5px;
        padding-bottom: 7px;
        padding-right: 7px;
        padding-left: 5px;
        border-radius: 5px;
        margin-left: -5px;
        margin-top: 10px;
    }

    div.sub_left_panel
    {
        position: relative;
        width: 100%;
        background: #ffffff;
        border-radius: 5px;
        border: 1px solid #c0c0c0;
        padding: 0;
        font-size: 8pt;
    }

    div.sub_left_panel  table#menu
    {
        padding: 2px;       
    }

    div.sub_left_panel  table#menu tr.header td
    {
        text-align: center;     
        vertical-align: center;
        background: #0099CC;
        border-top-left-radius: 5px;
        border-top-right-radius: 5px;
        font-weight: bold;
    }

    div.sub_left_panel  table#menu tr.sub_header td
    {
        font-weight: bold;
        padding-left: 5px;
        background: #E2E2E2;
    }

    div.sub_left_panel  table#menu tr.options td
    {
        border-bottom: 1px solid #c0c0c0;
        padding-left: 15px;
    }

    div.sub_left_panel  table#menu tr.options:hover td
    {
        background: #0099cc;
        color: #ffffff;
        cursor: pointer;
    }

    div.sub_left_panel  table#menu tr.thelast td
    {
        border: none;
    }

/* End Mian Body */

The problem is: the main body extend along the page vertically, but the main footer DIV does not lie on it's position which should be, this is the main footer html code

<div id="main_footer" class="round">

    <center>
        <a href="#">Home</a>   -   
        <a href="#">About Developer</a>   -   
        <a href="#">Follow me on Facebook</a>   -   
        <a href="#">For programming orders : thekingofhackers2008@hotmail.com</a>
    </center>

</div>

And this the main footer css code :

/* Start Mian Footer */

    div#main_footer
    {
        color: #ffffff;
        background:#3B5998;
        border-top-left-radius: 7px;
        border-top-right-radius: 7px;
        width: 900px;
        height: 5px;
        position: absolute;
        top: 100%;
        bottom: 0;
        padding-top: 5px;
        padding-bottom: 15px;
        padding-left: 15px;
        padding-right: 15px;
        font-size: 8pt;
    }


    div#main_footer a
    {
        color: #ffffff;
        text-decoration: none;
    }

/* End Main Footer */

To keep the footer in his right position, just change the div#main_footer style, modifying these lines :

    position: fixed;
/*    top: 100%;*/

See the result : http://jsfiddle.net/JVrf5/3/