Come impedire ai miei livelli div di sovrapporsi quando il browser viene ridimensionato?

Question

Ho appena trascorso le ultime settimane a imparare come progettare correttamente un layout. Fondamentalmente ho pensato che avessi tutto perfetto con il layout del mio sito web ed ero pronto per trasferire il codice su Wordpress ... e poi ho ridimensionato accidentalmente il mio browser web e ho scoperto che tutti i miei strati div si sovrapponevano l'uno con l'altro.

Ecco come si presenta:

In sostanza sembra come se è soprattutto il mio contenuto centro div che viene spremuto fuori, così come la mia immagine di intestazione e la strega di navigazione sono nella stessa parte superiore div. Anche il mio footer è schiacciato. Ho cercato su internet una soluzione a questo problema e non riesco a trovare nulla.

Come posso risolvere il problema in modo che il mio div rimanga in posizione quando il browser viene ridimensionato?

Answer 1

L'ho capito. Risulta che la larghezza del margine del mio contenuto centrale è stata dettata dai margini anziché solo una larghezza diretta (ad esempio 500px). Quindi, ogni volta che la pagina veniva ridimensionata, i margini sui lati del browser cercavano di rimanere com'erano, rendendo l'intera colonna più piccola.Dovevo solo sbarazzarmi dei margini e specificare dove volevo che la colonna si sedesse sulla pagina e giustifica una larghezza per essa.

Answer 2

Puoi pubblicare alcuni dei tuoi CSS?

Il modo più semplice è quello di fornire a tutte le colonne le impostazioni relativamente corrette di width in modo che le dimensioni della finestra del browser non influiscano sulle dimensioni del layout. Ottenere le colonne di larghezza del fluido da comportare è più complesso e dipende più dalle specifiche del tuo layout.

Answer 3

come Walter ha detto che il vostro CSS sarebbe stato utile. Ma il problema principale è che il contenuto del div è che trabocca in altre div perché il div del contenuto non può contenere tutto il contenuto.
Nel tuo css, prova a impostare la proprietà di overflow del div su auto (mostra le barre di scorrimento) o nascosto (per nascondere il contenuto solo se esce all'esterno del div) ad es.

overflow:auto; 

o

overflow:hidden; 

Answer 4

esprimere le vostre larghezze e font-dimensioni in EMS. Ecco una buona calcolatrice: http://riddle.pl/emcalc/

Anche le percentuali funzionano.

Controlla il css nello stackoverflow e prova a ridimensionare il livello di zoom nel tuo browser qui - vedrai che tutto si ridimensiona piacevolmente a qualsiasi livello di zoom.

Answer 5

Controlla la proprietà min-width. Un'altra opzione è di applicare un altro foglio di stile quando la larghezza viewport è al di sotto x pixel con CSS3 Media Queries in questo modo:

@media all and (max-width: 30em) { 
    /* Alternative narrow styles */ 
} 

o giù di lì:

<link media="all and (max-width: 30em)" 
     rel="stylesheet" href="narrow.css" /> 

CSS3 Media Queries non sono ancora ampiamente supportato, così si potrebbe desiderare di esaminare una soluzione che applica il foglio di stile "stretto" con JavaScript attraverso l'evento window.onresize. Suggerirei jQuery per una tale soluzione.

Answer 6

puoi anche provare la larghezza minima. sto assumendo che il centro div sia fluido e le barre laterali siano a larghezza fissa.

Answer 7

Ho avuto lo stesso problema se si dispone di larghezza e altezza nel contenitore DIV non cambierà tranne la larghezza a meno che non si inserisca una larghezza minima. Il problema che avevo era quando avrei fatto la finestra del browser, i div sarebbero andati alla riga successiva

quindi quello che ho fatto è stato nel contenitore che ho impostato in altezza e larghezza. Prima di non impostare un'altezza, ho lasciato che i div determinassero le altezze.