Comportamento anomalo di CSS quando cambia risoluzione schermo

[ubbicom]

Ciao a tutti.

Sono qui per chiedervi un consiglio:

ho realizzato un foglio di stile CSS che visualizza correttamente le pagine web dove è stato inserito (sui browser più conosciuti) sino a quando la risoluzione dello schermo è massimo 1152x864.

Non appena la risoluzione dello schermo supera la risoluzione 1152x864 la parte `footer` (piè di pagina) delle pagine web comincia a sovrapporsi a quelle parti di CSS che ho chiamato `header` (intestazione) e `center_area`.

Se provo ad adattare la parte `footer` alle risoluzioni superiori a 1152x864 poi il CSS modificato non funziona più sulle risoluzioni inferiori.

Cosa posso fare?
Da cosa dipende questa anomalia?
O è normale che cambiando la risoluzione dello schermo i CSS rispondano in maniera diversa?

Grazie in anticipo per qualsiasi tipo di suggerimento.

[codencode]

Posta il link al sito così da poterci dare un'occhiata.

[ubbicom]

Originariamente inviato da codencode
Posta il link al sito così da poterci dare un'occhiata.

Grazie, ti ho inviato un msg privato!

[codencode]

Il codice è un po' incasinato e non sarebbe male provvedere ad una ripulita. Ad esempio ci sono diversi errori di validazione HTML, il che rende inutile ed inappropriato inserire i loghi di validazione dell'HTML e dell'accessibilità.
Premesso ciò, per risolvere il problema del post prova ad inserire prima dei tre box del footer il codice

<span style="width: 100%; height: 0; font-size: 0; display: block; clear: both;">&nbsp</span>

[Peppe psp]

crea due fogli di stile ad uno tramite media gli assegni le risoluzioni inferiori a 1152x864 e al secondo quelle superiori

[ubbicom]

Originariamente inviato da codencode
Il codice è un po' incasinato e non sarebbe male provvedere ad una ripulita. Ad esempio ci sono diversi errori di validazione HTML, il che rende inutile ed inappropriato inserire i loghi di validazione dell'HTML e dell'accessibilità.
Premesso ciò, per risolvere il problema del post prova ad inserire prima dei tre box del footer il codice

<span style="width: 100%; height: 0; font-size: 0; display: block; clear: both;">&nbsp</span>

Grazie: infatti uno degli scopi per cui ho postato è sistemare per bene il tutto.
L'HTML temo di averlo incasinato io mettendo le mani qua e là... è una pagina costruita da altri in cui mi devo limitare ad inserire la parte in CSS.

Ho inserito il codice da te suggerito e pur non sovrapponendosi più il footer è decentrato rispetto al resto della pagina:

  <div id="footerblank">
    <div id="footer">
    
      <span style="width: 100%; height: 0; font-size: 0; display: block; clear: both;">&nbsp</span>
    
      <div id="footerbox">      
        <div class="footerheading"></div>        
        <div class="footertxt"></div>
        <div class="footerbutton"></div>
        <div id="footerlinks"></div>        
        <div id="copyrights"></div>
        <div id="validation"></div>        
      </div>

    </div>
  </div>