Sovrapposizione dei contenuti dei div

Ciao a tutti,
ho un dubbio dovuto all'ignoranza.

Ho tre div, uno a fianco all'altro, che hanno una dimensione relativa. Ho settato una larghezza minima. Vorrei che i contenuti dei div non si sovrapponessero quando ridimensiono la pagina. Quale soluzione dovrei adottare? Grazie mille

[karl94]

Potresti indicare l'indirizzo della pagina in questione?

Ecco, appena ho appena messo online le ultime modifiche.
http://mousraw.altervista.org/index.html

[NLSweb]

vuoi di proposito che i div si ridemsionino in percentuale alla riduzione della finestra ?
non desideri quindi che quando si riduca la pagina la si possa scorrere orizzontalmente ?

Fino a un certo punto voglio che si ridimensionino(che ho imposto con min-width), però invece di sovrapporsi vorrei che si possa scorrere orizzontalmente

[NLSweb]

hai impostato una position fixed e sia la dimensione che la posizione degli elementi in percentuale
con questa impostazione e' inevitabile che si sovrappongono.

ho cambi impostazione completamente , oppure devi usare i media query per cambiare gli stylesheet al ridimensionamento della pagina

io ti consiglio ti non ridimensionare gli elementi , anche perche' il problema si pone a dimensioni inferiori a 1024px
ed a meno che tu non voglia sviluppare il sito per schermi molto piccoli , non serve il ridimensionamento

Forse ciò che preferisco è cambiare il css nel caso in cui la dimensione della finestra non mi permetta il layout che preferisco.
Ho visto su javascript quale è la funzione per avere le dimensioni attuali della finestra del browser, come mi consigliate di svilupparlo? Ho provato la soluzione di un controllo della dimensione ogni x tempo ma la soluzione non è né ottimale né funziona
Grazie mille

[NLSweb]

Puoi caricare gli stylesheet in base alla risposta del media query , esempio

<link rel='stylesheet' media='screen and (min-width: 960px)' href='css/medium.css' />

o integrarlo direttamente nel codice , esempio

@media all and (min-width: 960px) {
  #elemento{
   .....
  }
}

quindi quando viene caricata la pagina la risposta dei media query usera' il foglio di stile appropriato

nel caso in cui la finestra venga ridimensionata , puoi applicare un window.addEventListener per verificare l'evento resize
e quindi riaggiornare i fogli di stile (questo se vuoi usare javascript)

window.addEventListener("resize", piccolo, true);

function piccolo()
{
	if (window.innerWidth < 640) 
	{
	 	{document.writeln('<link rel="stylesheet" type="text/css" href="Versione mobile.css" />');}
	}
}

Ho provato a usare questo codice javascript ma non mi funziona. Nella versione mobile del mio css dovrebbe cambiare semplicemente il colore del titolo in rosso in modo tale che veda subita se c'è stata una modifica. In cosa sbaglio? Il codice si trova nell'head dell'html

[karl94]

Ti consiglio di usare le Media Query, sono fatte appositamente per questo scopo. Segui gli esempi che ti ha proposto NLSweb.
Molti browser per dispositivi mobili inoltre forzano la viewport ad una larghezza di 1024px, se vuoi ottimizzare il layout per dimensioni inferiore a questa non dimenticare di aggiungere l'elemento meta apposito.

[NLSweb]

Il codice per controllare l'evento resize funziona , il codice per scrivere una nuova linea di codice no.

le partesi graffe non servono document.writeln("....");

ma non devi scrivere una nuova linea di codice per richiamare lo stylesheet !
in quanto lo dichiari a monte come nell'esempio che del post precedente..