ridimensionamento div

**HarravanS** · 17-12-2004, 21:38

Sto cercando un modo per ridimensionare un div che fa da contenitore per altri tre div.
Pensavo di dare un valore di lunghezza minimo al div "contenitore" (600px) e i div interni una lunghezza del 100% per coprire tutto lo spazio del contenitore.
Successivamente ho pensato al caso in cui, per dimensione diversa dei caratteri tra un utente e l'altro o per "eccesso" di contenuti, uno di questi div (uno qualunque) debba superare la dimensione di 600 px.
Ho fatto la prova e il div contenitore non viene ridimensionato.

Sto impazzendo dietro a questa cosa e non riesco a trovare nulla in proposito. Sono tentato di sostituirei div con le tabelle, ma se potessi evitarlo, dato che coi primi mi trovo meglio, sarebbe bello.

Ciao e grazie per ogni possibile aiuto.

**Igor70** · 17-12-2004, 23:45

Non ho capito molto bene, lunghezza minimo?
min-width vorresti dire?
Se cosi con IE non va.

Prova width:auto; nei div interni.

**HarravanS** · 18-12-2004, 00:00

Grazie della risposta.
intendevo min-height. Non ho problemi di farlo andare con IE.
Voglio che chi ha IE possa avere più problemi possibili

Non è razzismo è un sito tra amici e abbiamo tutti firefox (e visto che posso mi evito questo lavoro), qualche volta toccherà anche a lui un sito non utilizzabile

Il problema non sono quelli interni, ma il div che li contiene che non si ridimensiona. Il div interno si ridimensiona a causa dei contenuti (e quindi ok), ma non il div "contenitore".

Inoltre, se i div all'interno hanno posizionamento relative il div contenitore si adatta, ma perdo il posizionamento anche utilizzando float.

Inizio a pensare ad una limitazione dei css 2.0 con i div.

**Igor70** · 19-12-2004, 20:11

Scusa eh, ma non hai scritto che il div esterno l'hai fissato a 600px, mi sa che non è piu un problema tuo che dei css 2.0 con i div

**HarravanS** · 19-12-2004, 22:22

no ho impostato min-height a 600px, quindi in teoria dovrebbe aumentare.
Solo che i div interni crescono ma vanno oltre il div "contenitore", sovrapponendosi a quelli seguenti.
Se dentro il div contenitore inserisco una tabella questo si ridimensiona tranquillamente.
il risultato finale coi div è simile a questo: link

Io non trovo nessuno che abbia una soluzione, nè su siti nè su forum, è per questo che inizio a temere si tratti di una limitazione dei css o comunque dei div (e senza volerli sminuire, dato che li apprezzo non poco).

**Igor70** · 20-12-2004, 01:52

Data l'ora è anche possibile che io stia vaneggiando ma dando un'occhiata al tuo codice mi pare che queste chiusure siano di troppo, o sbaglio?

PHP-Stats </small>

</div>
<div id="SecondaryContainer">

A parte questo ho riletto il tuo problema ma mi sa che forse non ho capito bene, sara sempre colta dell'orario, comunque se fai cosi si allarga ma non credo tu voglia che si allarghi cosi, prova a rispiegare quello che vuoi.

#SecondaryContainer {
text-align:left; min-height:100px;
margin:0px auto; background:url(../images/bg.gif);
width:760px; height:100%;
float:left;
}

#sx{width:100px; background:#ff0; float:left;}
#main{background:#f00; width:auto; float:left;}
#dx{width:100px; background:#00f; float:left;}
#footer{clear:both;}

**Tokai** · 20-12-2004, 02:53

Non hai chiuso container ed hai due div con lo stesso id, che si beccano quindi le stesse proprietà.
inoltre non credo che tu abbia bisogno di utilizzare il min-height, è un layout a due colonne:

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Documento senza titolo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
<style type="text/css">
body{
	text-align:center;
	margin:0px;
	padding:0px;
}
#container{
	margin:0px auto 0px auto;
	text-align:left;
	width:750px;
	border:1px solid #456;
}
#testa{
	border:1px solid #098;
}
#dx{
	float:right;
	width:200px;
	border:1px solid #000;
}
#sx{
	margin-right:202px;
	border:1px solid #fc0;
}
#piedi{
	clear:both;
	border:1px solid #789;
}
</style>
</head>

<body>
<div id="container">
	<div id="testa">Logo</div>


	<div id="dx">

testo dx testo dx testo dx testo dx
 testo dx testo dx testo dx </p>

testo dx testo dx testo
 dx testo dx testo dx testo dx testo dx </p>

testo dx 
testo dx testo dx testo dx testo dx testo dx testo dx 
</p>

testo dx testo dx testo dx testo dx testo dx testo dx
 testo dx </p>

testo dx testo dx testo dx testo dx testo
 dx testo dx testo dx </p>

testo dx testo dx testo dx 
testo dx testo dx testo dx testo dx </p>


testo dx testo dx testo dx testo dx testo dx testo dx
 testo dx </p>

testo dx testo dx testo dx testo dx testo
 dx testo dx testo dx </p>

testo dx testo dx testo dx
 testo dx testo dx testo dx testo dx </p>

testo dx testo

 dx testo dx testo dx testo dx testo dx testo dx </p>
</div>


      <div id="sx">

testo sinistra testo sinistra testo
 sinistra testo sinistra testo sinistra testo sinistra testo
 sinistra testo sinistra testo sinistra testo sinistra testo
 sinistra </p>

testo sinistra testo sinistra testo
 sinistra testo sinistra testo sinistra testo sinistra testo
 sinistra testo sinistra testo sinistra testo sinistra testo
 sinistra </p>

testo sinistra testo sinistra testo 
sinistra testo sinistra testo sinistra testo sinistra testo 
sinistra testo sinistra testo sinistra testo sinistra testo 
sinistra </p>

testo sinistra testo sinistra testo sinistra
 testo sinistra testo sinistra testo sinistra testo sinistra
 testo sinistra testo sinistra testo sinistra testo sinistra
 </p>

testo sinistra testo sinistra testo sinistra testo 
sinistra testo sinistra testo sinistra testo sinistra testo
 sinistra testo sinistra testo sinistra testo sinistra 
</p>

testo sinistra testo sinistra testo sinistra testo 
sinistra testo sinistra testo sinistra testo sinistra testo
 sinistra testo sinistra testo sinistra testo sinistra 
</p>

testo sinistra testo sinistra testo sinistra testo 
sinistra testo sinistra testo sinistra testo sinistra testo
 sinistra testo sinistra testo sinistra testo sinistra 
</p>

testo sinistra testo sinistra testo sinistra testo
 sinistra testo sinistra testo sinistra testo sinistra testo
 sinistra testo sinistra testo sinistra testo sinistra 
</p>

testo sinistra testo sinistra testo sinistra testo 
sinistra testo sinistra testo sinistra testo sinistra testo
 sinistra testo sinistra testo sinistra testo sinistra 
</p>

testo sinistra testo sinistra testo sinistra testo 
sinistra testo sinistra testo sinistra testo sinistra testo
 sinistra testo sinistra testo sinistra testo sinistra 
</p>

testo sinistra testo sinistra testo sinistra testo
 sinistra testo sinistra testo sinistra testo sinistra testo
 sinistra testo sinistra testo sinistra testo sinistra 
</p>

testo sinistra testo sinistra testo sinistra testo 
sinistra testo sinistra testo sinistra testo sinistra testo
 sinistra testo sinistra testo sinistra testo sinistra 
</p>

testo sinistra testo sinistra testo sinistra testo
 sinistra testo sinistra testo sinistra testo sinistra testo
 sinistra testo sinistra testo sinistra testo sinistra 
</p>

testo sinistra testo sinistra testo sinistra testo
 sinistra testo sinistra testo sinistra testo sinistra testo
 sinistra testo sinistra testo sinistra testo sinistra 
</p>

testo sinistra testo sinistra testo sinistra testo
 sinistra testo sinistra testo sinistra testo sinistra testo
 sinistra testo sinistra testo sinistra testo sinistra 
</p>

testo sinistra testo sinistra testo sinistra testo
 sinistra testo sinistra testo sinistra testo sinistra testo
 sinistra testo sinistra testo sinistra testo sinistra 
</p>

testo sinistra testo sinistra testo sinistra testo 
sinistra testo sinistra testo sinistra testo sinistra testo
 sinistra testo sinistra testo sinistra testo sinistra 
</p>

testo sinistra testo sinistra testo sinistra testo 
sinistra testo sinistra testo sinistra testo sinistra testo
 sinistra testo sinistra testo sinistra testo sinistra 
</p>

testo sinistra testo sinistra testo sinistra testo
 sinistra testo sinistra testo sinistra testo sinistra testo
 sinistra testo sinistra testo sinistra testo sinistra 
</p>
</div>
	<div id="piedi">piedi</div>
</div>
</body>
</html>

'notte

**Tokai** · 20-12-2004, 02:59

sorry il copia+incolla non è venuto un gran che'

**HarravanS** · 20-12-2004, 13:40

oops, quello non è il mio sito, l'ho preso da un'altra discussione per dare un esempio.
comunque all'indirizzo emooz.net/prova ho uploadato una prova veloce per spiegare di cosa si tratta.

Il div #contenitore è impostato con min-height: 600px.
Dei tre div contenuti, #left è impostato com min-height: 100% (vedete che il div si allunga oltre), il div #right è impostato con height: 100% (il div rimane sempre della stessa dimensione, ovvero 600px come il contenitore, ma il testo scorre oltre e va sul #footer).

Ora quello che mi serve è un modo per costringere il div #contenitore ad allungarsi nel caso i div contenuti superino la lunghezza di partenza che è 600px.

grazie ancora

Discussione: ridimensionamento div

Strumenti discussione

Ricerca discussione

Visualizza

ridimensionamento div

Permessi di invio