Altezza del DIV non aumenta con il testo [era:Problemino]

[ServerMan]

Ciao Ragazzi,

ho un div:
.NomeDiv {
width : 165px;
text-align: left;
position: relative;
}

All'interno ci inserisco del testo,
ma l'altezza del div non mi segue il testo,
se io scrivo 4 righe ad esempio non si allunga verticalmente.

Non inserisco un'altezza fissa, perchè questo div lo utilizzo per diversi "box", e si dovrebbe sempre adattare verticalemente, in base al contenuto.

Voi sapreste come fare?

Vi ringrazio
Ciao

[thomas_anderson]

ciao!
se puoi, evita 'position:relative'. è deleterio per IE.
ossia, impostarlo così stravolge il layout perchè inizializza
hasLayout
su true.

potresti usare una misura percentuale o em per il box. questo ti consente ti far adattare il box alla finestra del borwser. se poi imposti anche i margini in em per i contenuti, hai fatto il più del lavoro.

ps. 'position:relative' lo userai in fase di debug, ossia quando devi eliminare un bug di IE. puoi fornirlo ad IE così:

* html body #box {position:relative;}

http://gabrieleromanato.altervista.o...one-di-ie-win/

[fcaldera]

benvenuto nel forum ma la prossima volta usa un titolo a norma di regolamento...

Ciao

[ServerMan]

Grazie thomas_anderson!
Si Sorry il titolo non era esplicativo!

Avrei un altra perplessità sempre nei css:
ho due belle colonne(div)
voglio fare, che quando il div a destra si allunga verticalemente a causa del contenuto,
lo fa anche il div a sinistra.

Come fare?
Non è mica un td che segue l'altro!

Grazie!

[Another-Life]

Originariamente inviato da thomas_anderson
ciao!
se puoi, evita 'position:relative'. è deleterio per IE.
ossia, impostarlo così stravolge il layout perchè inizializza
hasLayout
su true.

potresti usare una misura percentuale o em per il box. questo ti consente ti far adattare il box alla finestra del borwser. se poi imposti anche i margini in em per i contenuti, hai fatto il più del lavoro.

ps. 'position:relative' lo userai in fase di debug, ossia quando devi eliminare un bug di IE. puoi fornirlo ad IE così:

* html body #box {position:relative;}

http://gabrieleromanato.altervista.o...one-di-ie-win/

[OT]:

Che centra il riferimento ad haslayout??

[thomas_anderson]

hasLayout viene richiamato in gioco quando si impostano determinate proprietà CSS, come 'float' e appunto 'position:relative'. nell'articolo di Ingo Chao ci sono anche i modi di evitarlo.

[paologaz]

Per la lunghezza uguale delle colonne si dovrebbe fere così: applicare una immagine di sfondo ad un elemento che contenga per intero le due colonne, il cui scopo è disegnare, letteralmente, le due colonne. l' immagine posizionata a sinistra e ripetuta solo verticalmente.
Il codice css è questo:
<style type="text/css">
/*<![CDATA[*/
body {
margin: 0;
padding: 0;
font: 80% Verdana, Geneva, Arial, Helvetica, sans-serif;
text-align: center; /* per IE5.x/Win */
background: #EEE; color: #000;
}
#corpo {
width:700px;
float:left;
background: #FFF url(sfondo.2col.fisso.gif) left top repeat-y;
}
#centrato {
width:700px;
margin:auto;
text-align: left; /* per IE5.x/Win */
}
#colonna-1 {
float:left;
width:200px;
}
#colonna-2 {
float:left;
width:500px;
}
</style>

Il codice da inserire nel "body" è il seguente:
<div id="centrato">

<div id="corpo">
<div id="colonna-1">


Lorem ipsum mea sale iisque laoreet ei. Decore aperiam blandit quo ei. Fastidii patrioque constituto sea ea, qui ad sumo erant veritus, debet everti est ad. Pri simul fastidii fabellas an. An option incorrupte mea, omnium numquam petentium ei pro. Per ex nostro audire percipitur, eos latine pericula intellegat ad.</p>


Atqui numquam singulis his ne, an eius fugit velit vel. Ut vix nisl philosophia, his ex reque petentium interpretaris. Autem zzril invidunt eam ex. Eu malis error sed, erat omnesque an has. Vix et primis omnium, qui vidit debitis ea. No nec dico ubique mandamus, nec vide copiosae cu, est id postea adipisci. Ne cum dolore definiebas.</p>
</div>
<div id="colonna-2">


Stet invenire nam no. Quando nostro eligendi has an, labores vulputate id nam, sonet impedit platonem id sit. In his democritum eloquentiam, an sed everti voluptaria. Doctus persecuti vituperata cu mea. Quodsi vivendum interpretaris vix ne, salutandi expetenda omittantur ut nec, nec nusquam percipitur assueverit id. Id fabulas inciderint sea.</p>



Sint oblique maluisset duo ut. Ut eam ignota persius perpetua, quo id possim accusata oportere, timeam laboramus ius et. Habeo nostro electram ut sit, eum nisl reque te. Legimus tibique contentiones pri et, an ius facete tibique principes, dico dolorem contentiones pro ex.</p>
</div>
</div>
</div>

Allego anche l'immagine di sfondo.
Per correttezza codice e immagine le ho prese in prestito dal libro "css-guida completa" di Gianluca Troiani.