Div e allineamento verticale.

**gianiaz** · 20-02-2006, 15:21

Salve, quella in oggetto è una lacuna che ho da tempo e ora mi è venuto voglia di appianarla.

Quesito della susi:

Se ho un div con height:400px, come faccio a mettere del testo allineato al piede ?

Per intenderci quello che farei con un td impostando il vertical-align a bottom.

Avete idee?

**felixsuperstar** · 20-02-2006, 15:30

puoi creare all'interno una ltro div posizionato al piede del div contenitore da 400px e scrivere.

**gianiaz** · 20-02-2006, 15:37

sai che non ho capito....

non intendi una cosa cosi vero?

codice:

<div style="width:200px;height:400px;border:1px solid red;">
<div style="vertical-align:bottom">ciao</div>
</div>

perchè non funziona...

(ho provato a mettere il vertical align anche nel primo div...)

**felixsuperstar** · 20-02-2006, 15:49

cosi dovrebbe funzionare..

codice:

#box400pixel {
height: 400px;
background: #000000;
}
#boxpiede {
margin-top: 360px;
float: left;
width: 400px;
height: 40px;
background: #b48f12;
}
 
---------------------------------


<body>



<div id="box400pixel">
<div id="boxpiede">


testo testo testo testo</p>

</div>

</div>

</body>

</html>

**gianiaz** · 20-02-2006, 15:55

e lo so, in effetti non mi sono spiegato bene...
Il problema preciso è questo:

ho un menu creato con le liste e l'ordinamento inline.
Dentro le liste metto un div, che ha larghezza fissa, ma altezza dinamica.
il risultato che ottengo potrebbe essere simile a questo:

codice:

 +--------+ +--------+ +--------+ +--------+
 | Voce 1 | | Voce 1 | | Voce   | | Voce 4 | 
 |        | |        | | molto  | |        |
 |        | |        | | lunga  | |        | 
------------------------------------------------

come vedi l'effetto è brutto perchè viene allineato in alto.

Il problema è che il testo del menu viene caricato dinamicamente e può essere cambiato, quindi io non posso sapere a priori quanto la linguetta sarà alta e quante righe dovrà contenere...

grazie per l'aiuto

**Mich_** · 20-02-2006, 16:12

Non so perche` inserire un nuovo div dentro il box: e` meglio inserire direttamente il

.
<div id="box">
<p class="piede">testo testo testo testo</p>
</div>

Il CSS sara` del tipo:

codice:

#box {
  height: 400px;
  background: #000000;
}
.piede {
  margin-top: auto;
  margin-bottom: 0;
  width: 100%;
  background: #b48f12;
}

Questo non funziona in IE, per il quale occorre inserire nel CSS del #box anche:
vertical-align: bottom;

**gianiaz** · 20-02-2006, 16:18

sei sicuro che funzioni in questo modo?
io sto provando ma non mi sembra...

Discussione: Div e allineamento verticale.

Strumenti discussione

Ricerca discussione

Visualizza

Div e allineamento verticale.

Permessi di invio