Posizionare un Box-Model sul fondo pagina

[spiadadda]

Ciao a tutti,
dovrei posizionare un box-model (div) in basso a destra del layuot. Però ho la necessità che questo box deve essere sempre posizionato nella stessa posizione anche se l'altezza della pagina dovesse cambiare a seconda del contenuto (testo, immagini, ecc).

E' possibile fare ciò?
Ci sono guide o articoli dove poter capire come fare?

Grazie

[sonik_the_sonik]

Intanto non credo che box-model sia sinonimo di div... o sbaglio?

Comunque, hai già qualcosa su cui lavorare? Dato che detta così ci sono mille mila modi di fare ciò che hai chiesto...

[spiadadda]

Allora la struttura è molto semplice.....
Si tratta di un layout a tre colonne realizzate mediante i float e nella colonna di destra ho un div:

<div id="box_fondo"></div>

il quale contiene un'immagine di sfondo (della stessa dimensione del div) che deve restare sempre sul fondo della colonna di destra, anche se la colonna centrale (o quella di sinistra) ha un altezza maggiore (ad esempio per colpa del troppo testo o immagini ecc) rispetto alla colonna di destra.

Questo è il css relativo al div:

}
div#box_fondo{
	clear: both;
	width: 250px;
	height: 160px;
	margin: 0px;
	padding: 0px;
	border: 0px;
	background-image: url(/immagini/fiore.jpg);
	background-repeat: no-repeat;	
}

E' possibile ottenere che questo box sia posizionato sempre in basso?

[sonik_the_sonik]

Non è che ho capito esattamente cosa vuoi ottenere, comunque prova con:

div#box_fondo{
	clear: both;
	width: 250px;
	height: 160px;
	margin: 0px;
	padding: 0px;
	border: 0px;
	background-image: url(/immagini/fiore.jpg);
	background-repeat: no-repeat;
         position:absolute;
         bottom: 0;}

ps: non serve specificare l'unità di misura per il valore 0 (zero).

edit: non relative, ma absolute. pardon.

[spiadadda]

Scusami ma forse non mi sono spiegato bene.
Proverò a postare tutto il codice (almeno la parte saliente) per spiegare bene il mio problema.

Allora come già detto il layout è strutturato con tre colonne.
ecco il codice HTML

<div id="container">
<div id="header"></div>
<div id="main">
  <div id="content">
        <div id="contenuti">

AREA DEDICATA AL CONTENUTO</p> </div>
  </div>		
  <div id="nav">Colonna di destra.<div id="fiore"></div></div>
</div>
<div id="colonna_sx">Colonna di sinistra</div>
<div id="footer">footer</div>
</div>

Codice CSS

div#container{
	width:730px;
	margin: 0 auto;
	padding: 0px;
	border: 1px solid #66CC66;
	background-image: url(/immagini/sf-contenuti.gif);
	background-repeat: repeat-y;
	background-position: left top;
	background-color: #FFFFFF;
}
div#header {
	clear:both;
	width:730px;
	height: 70px;
	margin: 0px;
	padding:0px;
	border: 0px;
	background-image: url(/immagini/header.jpg);
	background-repeat: no-repeat;		
}
div#colonna_sx {
	float:left;
	width:35px;
	margin: 0px;
	padding:0px;
	border: 0px;
	
}
div#main{
	float:right;
	width:695px;
	margin: 0px;
}
div#content{
	float:left;
	width:445px;
	margin: 0px;
	text-align:center;
}
/* Navigazione di destra*/
div#nav{
	float: right;
	width: 250px;
	margin: 0px;
	padding: 0px;
	border: 0px;
}
div#contenuti{
	width:430px;
	margin: 0 auto;
	padding: 0px;
	border: 0px;
	text-align:left;
}
/* Box contenete il fiore in basso a destra */
/* Questo Box dovrebbe essere sempre posizionato in basso a destra subito sopra al footer */
div#fiore{	
	width: 250px;
	height: 160px;
	margin: 0px;
	padding: 0px;
	border: 0px;
	background-image: url(/immagini/fiore.jpg);
	background-repeat: no-repeat;
}
div#footer{
	clear:both;
	width: 730px;
	margin: 0px auto;
	padding: 0px;
	background: #FFFFFF;
	text-align:center;	
}

Allora il mio problema è che per motivi legati alla grafica il div:

<div id="fiore"></div>

deve essere posizionato sempre sul fondo della pagina subito sopra al footer.
In parole povere la colonna di destra deve presentare sempre la stessa altezza del BOX dei contenuti in quanto esso è quello che può presentare un altezza diversa....

Mi sono spiegato meglio questa volta? Se volete posso fare pure un immagine (jpg) del layout.

Ciao e grazie

[pictor]

In pratica vuoi un fiore sopra al footer. E basta?

Non capisco che cosa c'entrai l'altezza della colonna di destra e del contenuto.

Ma se provi con

div#fiore {
background-image: url('fiore');
width: <numero>px;
height: <numero>px;

position:absolute;
bottom: 0px;
right:0px;
}

?

Questo ti mette il fiore in basso a destra.
Poi non ho capito cos'altro vuoi.

Se fai un disegnino forse è meglio :P

[spiadadda]

Originariamente inviato da pictor
In pratica vuoi un fiore sopra al footer. E basta?

Non capisco che cosa c'entrai l'altezza della colonna di destra e del contenuto.

Questo ti mette il fiore in basso a destra.
Poi non ho capito cos'altro vuoi.

Si proprio così...vorrei posizionare un fiore in basso a destra subito sopra al footer!

Ho fatto così come mi hai consigliato e non funziona ne con absolute e ne con relative!

[Mich_]

Ma per posizionare uno sfondo, non serve un box, basta posizionare lo sfondo stesso:

background: url(fiore.gif) no-repeat bottom right;
da inserire nel box in cui va posizionato in basso a destra (il <body>?)

[pictor]

Lo stavo per dire pure io.... però ha detto che vuole il fiore (lo sfondo?) SOPRA al footer.

Credo....

[spiadadda]

Ho fatto un disegno del mio problema e lo trovate in allegato.

Il disegno schematizza la struttura del mio layout e il rettangolo BLU rappresenta il mio problema!

In parole povere quel rettangolo BLU deve stare sempre in quella posizione .

Attualmente così come ho fatto io (vedi codice HTML e CSS che ho postato prima), se il box centrale (quello dei contenuti) presenta un altezza maggiore (per via del troppo testo) rispetto al box di destra (colonna di destra) il box con il fiore (rettangolo BLU in figura) perde la sua posizione e non scende con il testo.