problema con i div

**Clodo** · 06-11-2006, 19:35

Ho un div il floating right di una dimensione fissa (200px), e ho bisogno che i restanti div nel documento siano collocati nell'area rimanente.

codice:

<div style="float:right;width:200px;border:1px solid blue;">
Float a destra
</div>
<div style="border:1px solid red;overflow:auto;">
Content1

Content2

Content3

</div>

Risultato in firefox2 e Opera (come desiderato)

Risultato con IE6 (non come desiderato)

Se rimuovo l'overflow:auto, tutti e tre i browser si comportano come IE6.

Come posso fare per trovare una soluzione che vada bene anche con IE6? grazie!

**Mich_** · 07-11-2006, 10:30

Non dici in che linguaggio stai scrivendo (DOCTYPE), ma assumo che non sia XHTML (perche` ci sarebbero altri errori di sintassi)

L'overflow non dovrebbe influire su quel comportamento.
Invece dovresti dare il float:right anche al secondo blocco (quello che deve posizionarsi a sinistra).

**Clodo** · 07-11-2006, 13:12

Ok scusa, DOCTYPE: HTML 4.01 Transitional.
So che l'overflow non dovrebbe influire, ma evidentemente lo fa.

Il mio problema è che il div a destra deve essere largo fisso a 200px, e gli elementi che dovrebbero andare a sinistra sono altri div (in display:block, con bordi & background vari) e devono essere larghi tutta l'area rimanente, in un layout non a larghezza fissa.

Nell'esempio sopra-citato, se anche il secondo div lo setto a float:right, non riesco a capire come settarne la dimensione...

Sto cercando di convertire un layout basato su tabelle in un layout basato su div, e questa è la parte che non riesco a riprodurre pari-pari solo con i div:

codice:

<table>
	<tr>
		<td width="100%">
			<div style="border:1px solid red;">
				Content1

				Content2

				Content3

			</div>
		</td>
		<td>
			<div style="width:200px;border:1px solid blue;">
				Div a destra
			</div>
		</td>
	</tr>
</table>

ciao e grazie!

**Mich_** · 07-11-2006, 13:20

Non so che gusto ci sia a trasformare una cosa che contiene errori semantici in un'altra che nasce gia` vecchia. Sarebbe piu` utile passare a XHTML (possibilmente strict).
Tra l'altro con XHTML 1.0 Strict anche IE si comporta molto meglio (quasi come gli altri).

Comunque prova a sostituire (nel codice postato all'inizio) il tuo overflow con:
float: right;

Il blocco dovrebbe allargarsi il piu` possibile, se il blocco superiore ha una larghezza determinata (se e` definita in percentuale, la cosa e` ricorsiva, e in tal caso deve essere definito
width: 100%
sia nell'oggetto <body> che nell'<html>)

**Clodo** · 07-11-2006, 15:38

Nell'esempio sopra-citato gli stili css li ho messi nell'html a titolo di esempio, dato che se li metto in uno stylesheet a parte il comportamento è identico.

Uso Html 4.01 e non xhtml perchè con l'attuale implementazione di XSLT, è possibile generare solamente HTML e non XHTML, e io genero i documenti da XSLT
(topic mio sull'argomento).

Ho provato quello che mi consigli, ma ancora non funziona.
Sembra quasi che la direttiva 'width:100%' la interpreti come '100% dell'area del blocco padre'...

codice:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html style="width:100%;">
	<head></head>
	<body style="width:100%;">
		<div style="width:100%;">
			<div style="float:right; width:200px;border:1px solid blue;">
				Float a destra
			</div>
			<div style="float:right; width:100%;border:1px solid red;">
				Content1

				Content2

				Content3

			</div>	
		</div>
	</body>
</html>

proprio non so che prove fare...
grazie mille! ciao!

**Mich_** · 07-11-2006, 16:06

Sembra quasi che la direttiva 'width:100%' la interpreti come '100% dell'area del blocco padre'...

Esatto, e` proprio cosi` che deve essere interpretato.
Il blocco <html> si riferisce a tutta la finestra del browser.

Invece il secondo blocco (quello che deve occupare il "resto dello spazio"), non deve avere larghezza 100%. Dovrebbe funzionare senza definire la larghezza.

Puoi anche provare a definire
left:0; right:0;
ma non tutti i browser interpretano correttamente una tale coppia di dichiarazioni.

Discussione: problema con i div

Strumenti discussione

Ricerca discussione

Visualizza

problema con i div

Permessi di invio