altezza div in base al contenuto

**Yassassin** · 12-08-2006, 10:20

io ho due div disposti come nell'immagine in allegato.

ora ho la necessità che l'altezza del secondo div si adatti all'altezza del div1, che a sua volta si deve adattare al suo contenuto (che varia tra 1 e 2 righe di testo).

Come faccio? Il problema è che si deve formare una specie di tabella (praticamente i due div nell'immagine si dublicano in verticale)

**Vincent.Zeno** · 12-08-2006, 12:00

prove se ti piace cosi:

codice:

<html>

<head>
<meta http-equiv="Content-Language" content="it">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Nuova pagina 1</title>
<style>
.contenitore {width: 300px;
              border: 1px solid red}
.uno {
float: left;
width: 140px;
border: 1px solid black;}
</style>
</head>

<body>
<div class="contenitore"><div class="uno">


testo</p>


testo</p>


testo</p>
</div>
    

testodue</p>
	

testodue</p>
	</div>
</body>

</html>

**Yassassin** · 17-08-2006, 12:08

rieccomi.

Ho provato il tuo codice, ma con firefox non va, il testo se ne scende...

ecco l'esempio: www.yassassin.com/test.html

**Vincent.Zeno** · 17-08-2006, 12:52

Adesso che rivedo il tutto mi ricordo che questo problema non l'ho mai risolto.

Avevo la stessa necessità e ho dovuto fare altre scelte.

Mi spiace.

**Francis87** · 17-08-2006, 13:52

il tuo html:

codice:

 <div class="due">
  <div class="uno">
   

testo</p>
   

testo</p>
   

testo</p>
   

testo</p>
  </div>
  

testodue</p>
  

testodue</p>
 </div>

il tuo css:

codice:

.due {
 float: left;
 padding: 0px 4px 0px 0px;
 background-color: #eec4b4;
}
.uno {
 width: 140px;
 background-color: #dddddd;
 float: left;
 margin: 0px 12px 0px 0px;
 padding: 4px;
}

il div "due" è il contenitore

**Vincent.Zeno** · 17-08-2006, 14:49

Bravo Francis

**Francis87** · 17-08-2006, 15:12

grazie

purtroppo qua ho solo firefox e con questo funziona. non ho idea di come di comporti con altri browsers! :master:

**Vincent.Zeno** · 17-08-2006, 15:29

funziona anche con IE.

sempre che sia il div piccolo a "comandare" le dimensioni.

**panta1978** · 17-08-2006, 15:31

Originariamente inviato da Francis87
grazie

purtroppo qua ho solo firefox e con questo funziona. non ho idea di come di comporti con altri browsers! :master:

Neanch'io riesco a fare una prova al volo con IE. Ma direi che occorra un commento condizionale per eliminare il classico errore di IE nel calcolare height e width.

codice:

Codice normale
.due {
 float: left;
 padding: 0px 4px 0px 0px;
 background-color: #eec4b4;
}
.uno {
 width: 140px;
 background-color: #dddddd;
 float: left;
 margin: 0px 12px 0px 0px;
 padding: 4px;
}

Solo IE
.uno {width: 160px}

In pratica in IE width = width + margin-left + margin-right + padding-left + padding-right

**Francis87** · 17-08-2006, 19:27

IE ha sempre bisogno di una patch css.

Discussione: altezza div in base al contenuto

Strumenti discussione

Ricerca discussione

Visualizza

altezza div in base al contenuto

Permessi di invio