Mandare a capo un div o ridimensionare testo quando non ci sta più

[Dve]

Salve, sto usando la fluid grid di dreamweaver, ho creato un div con width 100%, dentro il primo div c'è un altro div che fa da container, dentro quest'ultimo ci sono altri due div allineati tramite float left e float right. Ridimensionando la finestra il div con float right spinge il testo di quello con float left a capo. Io vorrei mandare a capo il div con float right nel caso non ci stia più oppure ridimensionare il testo nei due div per farcelo stare. Questo deve essere inserito nella media query che prevede una risoluzione minima di 769px (visualizzazione desktop)

[Mich_]

Quello che va a capo, quando non ci sta, e` il secondo che e` stato inserito (nel codice HTML). Probabilmente nel tuo codice hai inserito prima quello con float:right.


Se non vuoi che vadano a capo, salvo che la finestra sia proprio molto stretta, puoi usare una combinazione opportuna di min-width, width, max-width. Ad esempio:

#sinistra {
  width: 60%;   /* standard 60% */
  min-width: 30em;  /* se e` meno di 30 caratteri emme, forza questa larghezza minima */
  max-width: 100em; /* se la finestra e` molto larga, comunque il blocco viene limitato a 100 emme */
  float: left;
}
#destra {
  width: 39.9%;   /* standard 40% anche in caso di arrotondamenti strani */
  min-width: 70em; 
  max-width: 120em; /* se la finestra e` molto larga, comunque il blocco viene limitato a 120 emme */
  float: right;
}

[Dve]

Quello che va a capo, quando non ci sta, e` il secondo che e` stato inserito (nel codice HTML). Probabilmente nel tuo codice hai inserito prima quello con float:right.


Se non vuoi che vadano a capo, salvo che la finestra sia proprio molto stretta, puoi usare una combinazione opportuna di min-width, width, max-width. Ad esempio:

#sinistra {
  width: 60%;   /* standard 60% */
  min-width: 30em;  /* se e` meno di 30 caratteri emme, forza questa larghezza minima */
  max-width: 100em; /* se la finestra e` molto larga, comunque il blocco viene limitato a 100 emme */
  float: left;
}
#destra {
  width: 39.9%;   /* standard 40% anche in caso di arrotondamenti strani */
  min-width: 70em; 
  max-width: 120em; /* se la finestra e` molto larga, comunque il blocco viene limitato a 120 emme */
  float: right;
}

Ho provato stabilendo il max e il min width dei due div, ora purtroppo il div a destra (contenente testo) appena si ridimensiona la finestra finisce sotto il div a sinistra (contenente un immagine). Come far ridimensionare automaticamente l'immagine, bloccare il div a destra e far in modo che le parole vadano a capo se non ci stanno? Per quest'ultimo problema ho provato con un word-break: break-all; ​ma niente.

[Mich_]

Come far ridimensionare automaticamente l'immagine

Dipende da vari fattori:
se l'immagine e` uno sfondo, va settato l'autodimensionamento nello sfondo (non funziona in tutti i browser)
se l'immagine fa parte del contenuto, occorre vedere se ha senso ridimensionarla: comunque di solito si imposta una delle due:
- width:100%;
- height:100%;
(se si impostano ambedue, l'immagine viene deformata)
[chiaramente per poter dare all'immagine una dimensione in %, occorre che il contenitore abbia dimensioni definite]

Il word-break di solito non serve: le parole vanno a capo di default in tutti i browser. Quello che serve e` definire una larghezza (oppure max-width) al blocco che contiene il testo

[come] bloccare il div a destra

Basta che la larghezza totale non superi il 100% (compresi eventuali margin, border e padding)

Nota che stiamo parlando sempre in teoria: se vuoi provare a calare questi ragionamenti nella pratica, posta il link alla tua pagina.