Problema allineamento immagini sfondo

[CiciBoom]

Buongiorno a tutti ho un problema con l'allineamento di alcune immagini...
Cercherò di essere sintetica e spero chiara: ho un div che contiene altri 3 div (sinistra, centro, destra).
Tutti i div hanno una lunghezza variabile (contengono contenuti dinamici).
I due div di sinistra e destra contengono 2 immagini che dovrebbero rimanere sempre allineate in posizione bottom, mentre il div centrale ( in genere con altezza maggiore deve riempire completamente lo spazio con contenuti testuali).
Con il codice che allego le immagini si allineano perfettamente, ma... io non voglio dare una dimensione fissa al "contenitore"!!

Questo il codice:
div contenitore:
#faux {
margin-bottom: 0px;
margin-left: 7px;
background-repeat: #77533d no-repeat;
padding: 11px 0px 0px 0px;
height:1500px;
width: 100%;
}
colonna sin:
#leftcolumn {

display: inline;
float: left;
margin: 0px;
padding: 0px;
width: 265px;
height:100%;
background: #E96E49 url(img_gen/sfondo-sin.jpg) no-repeat bottom;

}

[Mich_]

HTML:
<div id="contenitore">
  <div class="laterale" id="sin"> &amp;nbsp; <div>
  <div class="laterale" id="des"> &amp;nbsp; <div>
  <div id="contenuto">
    

qui il testo o quello che vuoi</p>
</div>

CSS:
#contenitore {
  width: 100%;
  min-height: 100%;
  position: relative;                 /* serve per il posizionamento assoluto degli elementi interni */
  margin: 0;                                 /* non so perche` hai definito solo il left e bottom. Per avere una cosa stabile e` meglio definirli tutti */
  padding: 11px 0 0 0;
  background: #77533d url(falsecolonne.gif) repeat-y top center;   /* il tuo conteneva errore di sintassi */
                                  /* il file deve contenere il colore di sfondo delle colonne laterali: 1 px in vert x tutta la larghezza */
}

.laterale {
  margin: 0;
  padding: 0;
  width: 265px;
  position: absolute;
  min-height: 100%;         /* o quello che vuoi */
  bottom: 0;
}
#sin {
  left: 0;
  background: #E96E49 url(img_gen/sfondo-sin.jpg) no-repeat bottom center;
}
#des {
  right: 0;
  background: #E96E49 url(img_gen/sfondo-des.jpg) no-repeat bottom center;
}

#contenuto {
  margin: 0 265px;
  width: ....;     /* se serve; oppure puoi definire min-width */
}

[CiciBoom]

Ho provato ... ma non ottengo il risultato che vorrei... Ovvero con il codice che mi hai fornito si allinea tutto in basso.
Io vorrei che l'allineamento in alto fosse normale ( ovvero anche in alto ho una serie di 3 immagini che devono rimanere allineate) e che solo le 2 immagini in basso si allineassero effettivamente in basso nei div laterali in funzione del contenuto del mio div centrale.
Mi sono complicata tanto la vita
Un altro gentile aiutino?

[Mich_]

Non riesco a seguirti.

Dovresti fare uno schemino di quello che vuoi (usa un programma di grafica qualsiasi) e postalo.
Inoltre occorre sapere se le "immagini" sono sfondi (immagini fatte per abbellire) o se devono anche trasmettere un contenuto, nel qual caso sono da inserire tramite il tag <img>

Tieni anche conto del significato semantico dei vari blocchi: l'innestamento delle varie parti deve rispecchiare la semantica del contenuto.

[CiciBoom]

Innanzitutto ancora grazie mille per la disponibilità

Allego un'immagine esplicativa di quello che dovrei ottenere...
Le immagini saranno immagini di sfondo, ma dovranno essere sempre visibili nelle bande laterali, anche quando la parte centrare non dovesse essere abbastanza lunga ( rimarrebbe solo uno spazio bianco vuoto).
Nel caso in cui il testo centrale fosse molto più lungo delle bande laterali le immagini dovrebbero sempre segnare la "fine" della banda laterale, posizionandosi quindi in basso sempre.

grazieeee

[Mich_]

Ok adesso e` piu` chiaro e piu` completo.

Allora il tuo layout e` un classico layout a tre colonne (senza header ne` footer).
Le colonne devono essere trasparenti, mentre gli sfondi gialli devono essere realizzati con la tecnica delle false colonne, mentre le immagini sono background-image posizionate sul bottom
E qui le soluzioni divergono:
1. se #div-centro ha larghezza fissa le false colonne sono background-image del <body>
2. se #div-centro ha larghezza flessibile e le colonne hanno larghezza fissa, le false colonne sono background-image del <html> e del <body> rispettivamente

Invece per le immagini non puoi piu` usare gli sfondi di <html> e <body>, che sono gia` impegnati.
Quindi tocca inventare due altri due blocchi in cui posizionare le immagini.
Probabilmente la scelta piu` semplice e` inserire due blocchi dentro il <body> che prendano tutta l'area con contenuto:

HTML:
<html>
  <head>
    ...
  </head>
  <body>
    <div id="wrapper2">
      <div id="wrapper">
        ... qui il tuo sito, diviso nelle tre colonne ...
      </div>
    </div>
  </body>
</html>

CSS (caso 2. Nel caso 1 la cosa e` leggermente piu` semplice, ma la tecnica e` questa)
head {
  background: url(col-sin.gif) repat-y;
}
body {
  background: url(col-des.gif) repat-y;
}
wrapper2 {
  background: url(imm-sin.gif) no-repeat bottom left;
}
wrapper{
  background: url(imm-des.gif) no-repeat bottom right;
}

[CiciBoom]

grazie! : ciauz: