allineamento 2 div in basso affiancati di altezza variabile

**chiara_ad** · 25-10-2008, 15:05

devo allineare in basso 2 div. entrambi sn contenuti in 1 altro div.
1div è flottato a sinistra e il 2° a destra, devono restare in basso, ma flottandoli vanno in alto. Se metto la position:absolute, poi non posso mettere il margine superiore, invece questi 2 div HANNO ALTEZZA VARIABILE E devono restare allineati in basso ed avere lo stesso margin-top!!!
AIUTOOOOOOOOOO X FAVOREEEE

**pat7331** · 25-10-2008, 15:28

Prova a posizionare assolutamente il div contenitore con bottom: 0;

**chiara_ad** · 25-10-2008, 15:35

NN RISOLVE!!!

**Mich_** · 27-10-2008, 10:59

Non e` una cosa "standard" allineare in basso, e sono pochi i layout con tale particolarita`.

Tuttavia in qualche caso di puo` risolvere, ma devi dare piu` informazioni sul layout.

- Il contenitore ha larghezza fissa?
- I due blocchi hanno larghezza fissa?
- Nel contenitore ci devono stare solo i due blocchi?
- Il contenuto sta sicuramente dentro i blocchi? Che succede se il contenuto di un blocco non ci sta? Ci sevono essere overflow (barre di scorrimento)?
- In quali browser deve funzionare? In quali deve essere tutto visibile, ma non importa se la formattazione e` persa?
_ Quale DTD stai usando? SI puo` usare una DTD XHTML Strict?

**chiara_ad** · 27-10-2008, 15:27

Originariamente inviato da Mich_
Non e` una cosa "standard" allineare in basso, e sono pochi i layout con tale particolarita`.

Tuttavia in qualche caso di puo` risolvere, ma devi dare piu` informazioni sul layout.

- Il contenitore ha larghezza fissa?
- I due blocchi hanno larghezza fissa?
- Nel contenitore ci devono stare solo i due blocchi?
- Il contenuto sta sicuramente dentro i blocchi? Che succede se il contenuto di un blocco non ci sta? Ci sevono essere overflow (barre di scorrimento)?
- In quali browser deve funzionare? In quali deve essere tutto visibile, ma non importa se la formattazione e` persa?
_ Quale DTD stai usando? SI puo` usare una DTD XHTML Strict?

-si il contenitore ha larghezza fissa;
- anke i 2 blokki hanno largh. fissa;
- si solo i due blokki nel contenitore;
- si il contenuto entra nei blokki, ma l'altezza è variabile x entrambi;
-in tutti i browser: IE7 Safari Firefox, mentre x IE6 ho un css a parte;
-DTD XHTML 1.0 Transitional//EN

ti ringrazio x l'interessamento, se puoi aiutarmi ti sn gratissssima!!!

**Mich_** · 27-10-2008, 16:25

Allora la cosa e` semplice. Pero` bisogna usare i posizinamenti, e la cosa non e` standard: necessita di uno studio aggiuntivo, ad esempio tramite i due articoli:
I posizionamenti assoluti
Capire i posizionamenti relativi

Ecco il codice HTML:

codice:

<body>
  <div id="contenitore">
    <div id="primo">
      

... qui il suo contenuto ...</p>
    </div>
    <div id="secon">
      

... qui il suo contenuto ...</p>
    </div>
  </div>
</body>

CSS:

codice:

html, body {
  width: 100%;        /* sono necessari, altrimenti le misure successive non funzionano */
  height: 100%;
  margin:0; padding: 0;
}
#contenitore {
  position: absolute;
  margin:0; padding: 0;
  width: 700px;     /* o un'altra misura, ma occorre sistemare poi anche le altre */
  margin-left: -350px;   /* meta` di 700 */
  left: 50%;
  height: 100%;     /* oppure una misura fissa: in tal caso occorre anche centrarlo vert */
  background: grey;
}
#primo {
  position: absolute;
  margin:0; padding: 0;
  width: 300px;
  bottom: 0;
  left: 20px;        /* se lo vuoi - non e` necessario */
  background: red;
}
#secon {
  position: absolute;
  width: 340px;
  bottom: 0;
  right: 20px;        /* se lo vuoi - non e` necessario */
  background: green;
}

Come vedi non e` definita la height dei due blocchi interni
La somma delle due width e degli sapzi extra, non deve superare lo spazio del contenitore - io ho lasciato altri 20 px di spazio tra i due blocchi, tanto per dare aria.
I colori di sfondo servono per vedere come si espandono i blocchi: e` necessario lasciarli (eventualmente con colori meno violenti) finche` il layout non e` a posto, poi si puo` toglierli.
Se il testo dentro i blocchi interni puo` superare la dimensione del blocco (anche ingrandendo il carattere), occorre inserire degli overflow interni ai due blocchi, altrimenti il layout si scombina.

**chiara_ad** · 27-10-2008, 19:56

Originariamente inviato da Mich_
Allora la cosa e` semplice. Pero` bisogna usare i posizinamenti, e la cosa non e` standard: necessita di uno studio aggiuntivo, ad esempio tramite i due articoli.....

ok questo è chiaro, ma il mio problema non è tanto farli restare in basso, come avevo già specificato, metttendo la proprietà absolute stanno in basso ma questi 2 div di altezza variabile, cioè a volte è + alto il 1° a volte il 2° in base all'altezza dell'immagine e del testo immesso, devono avere LO STESSO MARGIN-TOP rispetto a ciò che sta sopra, cioè prima del div contenitore dei 2 blocchi ci sono altri div ke contengono contenuti, ed è rispetto a questi ke i 2 div allineati in basso devono mantenere sempre lo stesso margine. Invece mettendo la posotion absolut li sovrasta!!!

ringrazio moltissimo x l'aiuto, ma nn è risolutivo :master: ecco cosa accade:
http://garden.altervista.org/prova.jpg

**Mich_** · 28-10-2008, 10:18

Allora non ho capito.
Ho visto quello che succede, ma non avevo capito che nel contenitore ci doveva essere altra roba.

Non e` che puoi fare uno schemino grafico con tutti i blocchi coinvolti?
Magari due grafici: uno con i blocchi che ci stanno nel contenitore ed uno con i blocchi che non ci stanno (la scrollbar deve essere sulla pagina intera o sui singoli blocchi interni?)

**chiara_ad** · 28-10-2008, 15:36

Originariamente inviato da Mich_
Allora non ho capito.
Ho visto quello che succede, ma non avevo capito che nel contenitore ci doveva essere altra roba.

Non e` che puoi fare uno schemino grafico con tutti i blocchi coinvolti?
Magari due grafici: uno con i blocchi che ci stanno nel contenitore ed uno con i blocchi che non ci stanno (la scrollbar deve essere sulla pagina intera o sui singoli blocchi interni?)

Praticamente i 2 div ad altezza variabile sn contenuti un 1 altro div, ma prima di questo di c'è un altro div
così:

<body>
<DIV>CON ALTRI CONTENUTI, DELLA STESSA LARGHEZZA DEL DIV CONTENITORE</DIV>
<div id="contenitore DEI DIV AD ALTEZZA VARIABILE ALLINEATI IN BASSO">
<div id="primo">

... qui il suo contenuto ...</p>
</div>
<div id="secon">

... qui il suo contenuto ...</p>
</div>
</div>
</body>

Discussione: allineamento 2 div in basso affiancati di altezza variabile

Strumenti discussione

Ricerca discussione

Visualizza

allineamento 2 div in basso affiancati di altezza variabile

Permessi di invio