altezza div

[lucavizzi]

Buongiorno,
ho due div: nome e messaggio
dentro al contenitore main

<div id="main">
<div id="nome">Nome</div>
<div id="messaggio">

</p>

</p>

</p></div>
</div>


il div nome conterrà un solo rigo, mentre il div messaggio anche più di uno.

io vorrei che l'altezza di nome fosse uguale all'altezza di messaggio.
Però se imposto un colore di sfondo mi accorgo che l'altezza di nome (che ho impostato al 100%) si limita ad un solo rigo.

#main{
    height:auto;
	width:600px;
	border:1px dotted #cccccc;
	margin:0px auto;
}
#nome{
    width:200px;
	height:100%;
	background-color:#FFFFCC;
	float:left;
}
#messaggio{
    width:400px;
	height:auto;
	background-color:#FF99FF;
	float:left;
}

ho provato ad usare min-height ma senza risultati, come faccio ad ottenere due altezze uguali?

Grazie
Luca

[lucavizzi]

ho controllato con firefox.

del div main si vede solo il border VVoVe:

le height auto funzionano (con sfondo neutro) solo su ie


nessuno ha una dritta?

[mucu]

guarda che nel tuo primo post dici che vuoi questo di un rigo e quello di un rigo che però è alto solo un rigo
è tutto molto vago, per non dire contraddittorio
nel css dai height=100% a un div
e all'altro auto
non puoi pretendere risultati simili
usi il float ma ti manca il clear
e per finire hai condito il tutto con una bella manciata di

vuoti
ti consiglio di postare un link in modo che ti si possa aiutare meglio

[lucavizzi]

Il campo #nome conterrà solo un nome di persona
Il campo #messaggio invece conterrà molto testo.

voglio ottenere due altezze uguali.


i paragrafi vuoti servono appunto a testare l'inserimento nel div #messaggio di molto testo, sono solo una prova.

[mucu]

il div messaggio deve contenere molto testo
ma quante righe ne vuoi visualizzare ancora non è chiaro
comunque se il div deve contenere più testo di quello che visualizza devi settare l'altezza in px o em e dargli "overflow: auto"

[lucavizzi]

è esattamente la soluzione che ho adottato, ma la considero una soluzione di ripiego.

Vorrei visualizzare TUTTO il testo (height:auto; quindi)

e #nome dovrebbe "crescere" di conseguenza

[mucu]

forse finalmente ho capito
non devi mettere nessuna misura a parte la larghezza
in questo modo i div si espandono naturalmente
almeno quelli che si riempiono
e per evidenziare le due colonne usa uno sfondo ripetuto nel main
che è la tecnica delle false-colonne

[Mich_]

Quello che vuoi e` una lista di definizione, che si rende con i tag <dl>, <dt>, <dd>.
Poi una volta che la marcatura e` a posto, sistemare il CSS divneta un giochetto:

<dl>
  <dt>Nome cognme</dt>
  <dd>qui la descrizione lunga della persona; puoi anche metterci dentro dei tag &amp;lt;br /&amp;gt;
</dd>
</dl>
<dl>
  <dt> ...</dt>
  <dd> ...</dd>
</dl>

CSS:
dd {
  width: 100%;
  clear: left;
}
dt {
  width: 10em;   /* ad esempio */
  float: left;
}
dd {
  margin: 0.2em 0 0 10em;
}

[lucavizzi]

Grazie Mich_

una domanda negli stili hai messo 2 volte

CSS:
dd {
width: 100%;
clear: left;
}
dt {
width: 10em; /* ad esempio */
float: left;
}
dd {
margin: 0.2em 0 0 10em;
}

è un errore? il primo è dl?
non sto riuscendo ad affiancare #nome e #messaggio

[lucavizzi]

il mio codice

dl{
	width:700px;
	border:1px dotted #cccccc;
	margin:0px auto;
}
dt{
	width:250px;
	float:left;
}
dd{
	width:449px;
	float:left;
	border-left: 1px dotted #999999;
	line-height:15px;
}

<dl>
<dt></dt>
<dd></dd>
</dl>