Div che non rispettano l'ordine

[trez]

Cia oa tutti,
ho un problema con il posizionamento dei div.

La struttura del sito che sto realizzando è questa:
- un contenitore che racchiude il tutto (container);
- header che contiene tre classi: sub_header, menu, header space che non sono altro tre div disposti uno sopra l'altro orizzontalmente;
- un content per tenere il contenuto del sito: questo è dato da un menu a sinistra e il contenuto vero e propri oa destra allineati orizzontalmente grazie a float:left;
- un footer che DOVREBBE restare sotto il content;

Il problema è quel "dovrebbe" del footer: il risultato che ho è che ho l'header in alto (giusto), subito dopo il footer (non giusto!) e il contenitore (content) che è sovrapposto al footer quando invece dovrebbero essere uno sopra l'altro :/

Ecco il codice:

CSS:

html{
    margin:0;
    padding:0;
    border:0;
}

body{
    background-color:#ffffff;
    margin:0;
}

#header{
    background-color: #071c2d;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    
}

#header .sub_header{
    height:100px;
    width:1050px;
    margin-left: auto;
    margin-right: auto;
    background: url(../images/header.jpg) center;
    
}

#header .menu{
    height: 41px;
}

#header .menu img{
    position:absolute;
    left:50%;
    margin-left:-525px;
}

#header .header_space{
    width:100%;
    height:34px;
}




#content{
    width:1050px;
    margin:0 auto;
}

#content .sub_content {
  width: 828px;
  margin: 0;
  float:left;
}

#content .sub_menu {
  width: 222px;
  margin: 0;
  float:left;
}





#footer{
    background-color: #071c2d;
    width: 100%;
    height:64px;
} 

index.html

<div id="container">
          <div id="header">
                  
              <div class="sub_header"></div>
              <div class="menu">
                  [img]/images/menu.jpg[/img]
              </div>
              <div class="header_space"></div>
          </div>


          <div id="content">
              <div class="sub_menu">
                  <table cellpadding="0" cellspacing="0" border="0">
                      <tr>
                          <td>
                              [img]/images/clienti/sub_menu_01_01.jpg[/img]
                          </td>
                      </tr>
                      <tr>
                          <td>
                              [img]/images/clienti/sub_menu_nuovo_deactive_01_02.jpg[/img]
                          </td>
                      </tr>
                      <tr>
                          <td>
                              [img]/images/clienti/sub_menu_ricerca_deactive_01_03.jpg[/img]
                          </td>
                      </tr>
                      <tr>
                          <td>
                              [img]/images/clienti/sub_menu_modifica_deactive_01_04.jpg[/img]
                          </td>
                      </tr>
                      <tr>
                          <td>
                              [img]/images/clienti/sub_menu_01_05.jpg[/img]
                          </td>
                      </tr>
                  </table>
              </div>
              <div class="sub_content">
                  <?php echo $sf_content ?>
              </div>
          </div>


          
          <div id="footer">
              [img]/images/footer.jpg[/img]
          </div>

          
      </div>

Dove sbaglio??
La cosa più "strana" che ho fatto è l'allineamento centrale dell'immagine del menu usando:

position:absolute;
    left:50%;
    margin-left:-525px; 

ma...boooh!


Grazie!!
Ciao!

[codencode]

Aggiungi

clear: both;

a #footer nel foglio di stile.