DIV con altezza variabile

[alkondor]

Salve,
sto disegnando un template per un blog in cui è presente un DIV corpo centrale ad altezza variabile (dipendente dal contenuto) e dei DIV ai lati di questo che riproducono un'immagine di sfondo ripetuta sull'asse Y in modo da "incorniciare" correttamente il corpo centrale.

Il problema è che quando il DIV centrale "cresce" in altezza, i due DIV laterali non fanno lo stesso.

Come posso risolvere?

Come mai nel DIV centrale il testo non va a capo?

Il mio attuale codice è questo (ho lasciato i CSS inline per semplicità, ma ovviamente nel risultato finale saranno in un foglio di stile esterno:

 <div style="width=60px;  height=auto; float:left; background-image=img/template_r7_c1.gif; background-repeat:repeat-y;">[img]img/template_r7_c1.gif[/img]</div>


   <div style="width=680px; height=auto; float:left; word-wrap: break-word;"> 

...TESTO MOLTO LUNGO...</p></div>


<div style="width=60px;  height=auto; margin-left:740px; background-image=img/template_r7_c17.gif; background-repeat:repeat-y;">[img]img/template_r7_c17.gif[/img]</div> 

Allego un file per rendere l'idea del risultato attuale e di quello che vorrei ottenere (quello che vorrei ottenere l'ho ricreato con photoshop )



Grazie.
Ale

[Mich_]

Forse ti manca solo un clear, come spiegato in questo thread: [Pillola] FabClearing, un metodo crossbrowser alternativo per il clearing dei float (vedi anche il link segnalato nell'ultimo post)

[alkondor]

Il metodo da te suggerito mi consente di andare a scrivere subito sotto i 3 div, ma non di adattare automaticamente l'altezza dei due DIV laterali a seconda dell'altezza del DIV centrale...

Ho anche provato ad inglobare i tre DIV in un DIV contenitore e ad impostare height:100%; per i due DIV laterali, ma non funziona...

[Mich_]

Inglobare i tre blocchi affiancati in uno che li contiene puo` essere utile.

Per quanto riguarda "adattare automaticamente l'altezza", la tecnica da utilizzare si chiama "false colonne" ("faux columns"), e la trovi spiegata tra i "link utili", nel fourm (ricerca con il bottone in alto), ed anche in rete.

[francesk87]

Io ho risolto cosi spero ti sia utile

<div id="Contenuto" style="display: block;width: 900px;margin: auto;background-image:url(Immagini/BordoCentraleSx.jpg);background-repeat:repeat-y;">
	<div id="BordoDestraCentrale" style="background-position: top right;background-repeat:repeat-y;background-image:url(Immagini/BordoCentraleDx.jpg);">		
	
		<div id="Testo">
			
			Questo è il testo molto lungo
			
		</div>				
	</div>		
</div>

Ciao

[alkondor]

Grazie mille ad entrambi! Ho risolto
Ciao!
Ale