Div nestati relative/absolute: chiarificazioni

**mfonz85** · 15-01-2009, 12:18

Ciao a tutti, vi espongo un problema.
Mettiamo caso che ho una pagina con un codice html di questo tipo:

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="it" lang="it">
<head>
	<title>Prova</title>
	<style type="text/css">
		body { font-family: "Lucida Grande", Tahoma, Verdana, Arial, Sans-Serif; font-size: 12px; }
		#wrapper { margin:0; padding: 20px; background: #CCC; }
		#container { background: #FFF; border: 2px solid #999; }
		#nesterContainer { position: relative; }
		#destra { position: absolute; right: 0; top: 0; border: 1px solid #FF0000; margin:0; padding: 40px; }
	</style>
</head>
<body>
<div id="wrapper">
	<div id="container">
		<div id="nesterContainer">
			<div id="destra">
				Ciao
			</div>
			CIAO - CIAO - CIAO
		</div>
		<div id="textContainer">
			Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
		</div>
	</div>
</div>
</body>
</html>

Ovvero, ho un contenitore con 2 div principali: in uno, nesterContainer, gli do il position: relative per poter poi utilizzare nel div figlio "destra" il position:absolute per posizionarlo in fondo a destra, appunto ( right:0; top:0 ).
Nell'altro div "textContainer" non ci sono stili, è solo usato come contenitore del testo.
Ora, se provate a visualizzare la pagina non c'è nessun errore e l'output è proprio come ci si potrebbe immaginare, cioè il div assoluto "destra" va sopra al div sottostante "textContainer", incrociandosi con il testo.
C'è secondo voi un sistema per far "wrappare" il testo di "textContainer", in modo che non intersechi con quello del div "destra" ?
Altra cosa, c'è un sistema per fare in modo che "container" vada fino alla fine del div assoluto? Cioè che lo sfondo grigio, per intenderci, termini sotto al div assoluto.

Lo so che mettendo i div in maniera diversa e usando i float correttamente si arriverebbe al risultato che voglio ottenere in maniera molto più semplice, ma questa è una domanda "accademica", vorrei capire se è possibile farlo e se sì, come...

**mfonz85** · 16-01-2009, 13:18

Non si può fare, vero?

**fcaldera** · 16-01-2009, 13:27

codice:

#textContainer {
	margin-right: 100px;
}

**mfonz85** · 16-01-2009, 15:30

Originariamente inviato da fcaldera

codice:

#textContainer {
	margin-right: 100px;
}

Ok, ma ti faccio un'altra domanda
Se volessi una roba così: (i trattini li uso per wrappare; BLOCCO = quello absolute per intenderci)

CIAO - CIAO - CIAO ----|---------|
lorem ipsum dolor sit---|BLOCCO|
amet, consectetur-------|---------|
adipisicing elit sed do---|______|
eiusmod tempor incididunt ut
labore et dolore magna aliqua

invece di (come nella tua soluzione)

CIAO - CIAO - CIAO ----|---------|
lorem ipsum dolor sit---|BLOCCO|
amet, consectetur-------|---------|
adipisicing elit sed do---|______|
eiusmod tempor
incididunt ut labore
et dolore magna aliqua

Questo non si può fare giusto?

**fcaldera** · 16-01-2009, 15:37

così?

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="it" lang="it">
<head>
	<title>Prova</title>
	<style type="text/css">
		body { font-family: "Lucida Grande", Tahoma, Verdana, Arial, Sans-Serif; font-size: 12px; }
		#wrapper { margin:0; padding: 20px; background: #CCC; }
		#container { background: #FFF; border: 2px solid #999; }
		#nesterContainer { position: relative; }
		#destra { position: absolute; right: 0; top: 0; border: 1px solid #FF0000; margin:0; padding: 40px; }
		p {
			margin: 0 0 1.5em 0;
			padding	: 0;
		}
		#textContainer {
			margin-right: 100px;
		}
	</style>
</head>
<body>
<div id="wrapper">
	<div id="container">
		<div id="nesterContainer">
			<div id="destra">
				Ciao
			</div>
		<div id="textContainer">
			

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
			

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
			

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
		</div>
		</div>
	</div>
</div>
</body>
</html>

si può fare, ma la cosa prevede di conoscere a priori la larghezza dell'elelemento in absolute e se il testo affiancato non riempie abbastanza il contenitore, devi sapere a priori anche l'altezza (in ems) per dare un min-height al contenitore (o il blocco in absolute deborda)

O la domanda era se puoi girare attorno al blocco in absolute?

Quello no, non credo tu possa farlo snza float.

**mfonz85** · 16-01-2009, 15:49

Originariamente inviato da fcaldera
O la domanda era se puoi girare attorno al blocco in absolute?

Quello no, non credo tu possa farlo snza float.

Più o meno la domanda era quella...
Magari esisteva una direttiva CSS che "capisce" se il testo sta andando sotto un div assoluto e lo faceva wrappare a capo, ma mi sbagliavo

Ok, allora mi conviene assolutamente usare il float, ovvero devo riscrivere un attimo la struttura di quello che stavo facendo

Grazie delle dritte, mi sei stato di aiuto

Discussione: Div nestati relative/absolute: chiarificazioni

Strumenti discussione

Ricerca discussione

Visualizza

Div nestati relative/absolute: chiarificazioni

Permessi di invio