No encajo el footer ni los bordes

[JJMD]

Buenas!

Estoy con una web y me estoy haciendo un lío con el css...
Así es como la tengo y se me ve en firefox:


edit: así se me ve en chrome: http://imageshack.us/photo/my-images/839/unled222222222.png/ (como lo quiero pero sería con los dos footers abajo)

Lo que me gustaría es que las rayas naranjas siguieran hasta abajo del todo y la verde de abajo del todo se quede en medio, pero abajo del todo.
Además, que la imagen de CC y el texto de debajo, se quede justo encima del pie verde.
Y bueno, que todo el color más claro se extienda por todo lo oscuro (creo que se me entiende, espero haberme explicado bien)

Aquí dejo código :S

Código HTML:

<table cellspacing="0" cellpadding="0" align="center" style="border:0 none; width:100%">
    <tbody>
        <tr>
            <td class="border_left">
            </td>
                <td class="content">
                    <div class="topbar">
                      <table cellspacing="0" cellpadding="0" border="0" style="width:100%;">
                            <tr>
                                 <td id="header_logo" width="1"> <a href="http://10.81.143.241" title="Ffdfd" Class="topimg">
                                 <img src="http://flasdfaf.img" style="border: 0 none;vertical-align:middle; margin: 0px;" alt="FldfS"></a>
                                </td>
                            </tr>
                        </table>
                    </div>
                    
                    <div style="width: 100%; padding-top: 4px;" id="bg_header_bar">
                        <table border="0" cellspacing="0" cellpadding="0" style="width: 100%;">
                            <tbody>
                                <tr style="vertical-align:middle">
                                    <td class="smalltext" style="vertical-align:middle;text-align:right;padding-right:10px; padding-top:0px; padding-bottom:0px;font-weight:bold">
                                        <?php echo date("d-m-Y, H:i:s");?> 
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    
                    
                    <div id="bg_nav_links">
                    | <a href="http://10.81.143.241" class="nav_important">Inicio</a>&nbsp;|
                    <a href="http://10.81.143.241">asdf</a>&nbsp;|
                    <a href="http://10.81.143.241">fdsa</a>&nbsp;|
                    <a href="http://10.81.143.241">asdfasdf</a>&nbsp;|
                    <a href="http://10.81.143.241">Cqwerqwe</a>&nbsp;|
                    <a href="http://10.81.143.241">5768uyhn</a>&nbsp;|
                    
                    </div>
                
                
 
                <div class="content">
                    <table width="100%" cellpadding="0" cellspacing="0" border="0">
                        <tbody>
                            <tr>
                            </tr>
                        </tbody>
                    
 
AQUÍ ESTÁ LA TABLA QUE SE VE EN LA IMAGEN CON EL BOTÓN
 
</div>
                <div id="footer">
                    <span class="smalltext"><br>
                        <center><a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/2.5/es/"><img alt="Creative Commons License" style="border-width:0" src="http://creativecommons.org/images/public/somerights20.png"></a><br></center><p></p><p></p><center><b>xxxxxxxx ® 2080 - 2011. <i>Esta Web está bajo una <a href="http://GOOGLE.ES">Licencia ASDF DE FDSA ASDF Y TAL Y CUAL</a></i></b></center><b>
                    <br>
                </b></span><b>
                </b>
              </div>
                       <div id="hooter"></div>    
                
                    </td>
                    
                </td>
                <td class="border_right"></td>
        </tr>
    </tbody>
</table>
 

Y Aquí el código CSS:

Código CSS:

html, body {
background: #919393;
height:100%;
margin: 0;
padding: 0;
}
 
#container {
   min-height:100%;
   position:relative;
}
 
 
.content {
background: #CCC;
margin: 5px;
text-align: left;
height:100%;
 min-height:100%;
 position:relative;
width: auto;
 
}
 
#bg_nav_links {
background: url(images/bg_nav.gif) #EBEBEB;
border: solid 1px #6F6F6F;
border-width: 1px 0;
color: #999;
font-size: 11px;
height: 18px;
margin-bottom: auto;
margin-top: auto;
padding-top: 4px;
text-align: center;
width: 100%;
}
 
#bg_header_bar {
background: url(images/bg_nav.gif) #EBEBEB;
border: solid 1px #6F6F6F;
border-width: 1px 0;
color: #999;
font-size: 11px;
height: 18px;
margin-bottom: auto;
margin-top: auto;
text-align: left;
width: 100%;
}
 
.topbar {
background: url(images/blue/bg_header.gif) green;
 
}
 
 
.border_left {
background: url(images/bg_left.gif) orange;
vertical-align: top;
width: 20px;
height:100%;
min-height::100%;
 
}
 
.border_right {
background: url(images/bg_right.gif) orange;
vertical-align: top;
width: 20px;
height:100%;
min-height::100%;
 
}
 
 
 
table {
empty-cells: show;
}
 
table {
display: table;
border-collapse: separate;
border-spacing: 2px;
border-color: gray;
}
 
td, th {
display: table-cell;
vertical-align: inherit;
}
 
 
#hooter {
   position:absolute;
   bottom:0;
   width:100%;
   height:20px;   /* Height of the footer */
   background:green;
}
 
 
 
div {
display: block;
}
 

En qué fallo? qué debo cambiar??





Gracias adelantadas!