altezza uguale a seconda dei contenuti dei div

[ANTAGONIA]

Buon pomeriggio, ho 3 div con contenuti diversi, vorrei che anche se cambiando risoluzione i due più corti avessero la stessa altezza di quello più lungo...
in pratica gli altri due come se prendessero le stesse dimensioni...
E' possibile fare ciò?

[ResianTaxidrive]

cerca il sistema delle false colonne e troverai probabilmente ciò che fa per te.

[Mich_]

La tecnica necessaria si chiama "false colonne".
Prova a cercare tra i "link utili", oppure in rete.

[ANTAGONIA]

ok...ho preso come esempio il tutorial delle false colonne..

ora, quello che non so fare, sono due ore che ci sbatto la testa è vorrei inserire dei divisori tra i div affiancati che vanno a comporre le 3 colonne, cosi da avere un effetto pulito e leggibile.
questo è quello che ho:

<div id="containerTop"> 
  <div id="subContainer" > 
    <div id="sidebar1"> 
      <h2>Call Center</h2>
      

Il servizio è in funzione blah blah blah blah</p>
    </div>
    <div class="divisorio"></div>
    <div id="sidebar2"> 
      <h2>Band</h2>
      <address lang="it" title="indirizzo e recapiti fax e telefonici">
      

Via le mani dal naso,1</p>
      

00666 Milano</p>
      

E-mail:band@masecondote.it</p>
      </address>
    </div>
    <div class="divisorio"></div>
    <div id="sidebar3"> 
      <h2>Concerti</h2>
      

Guarda le Info relative i concerti del mese</p>
    </div>
  </div>
  <div> 
    <div id='load'></div>
  </div>
</div>

nel css:

#containerTop{
	border:0px solid red;
	min-width: 100px;
	/*background-color:#c0c0c0;*/
	position:relative;right:35px;overflow:hidden;
	}
#subContainer{
	overflow:hidden;
	background-image: url('lliquid.png');
	background-repeat:repeat-y 33%;
	border:1px solid #ecedec;
}
#sidebar1, #sidebar2, #sidebar3{
	float: left;
    /*width:29%;\width:33%;w\idth:29%;*/ /*box model hack semplificato*/
	width:25%;\width:30%;w\idth:25%; /*box model hack semplificato*/
    padding: 0 2%;
	color: #333;
	font-size:100%;
	
}
.divisorio{
	border-right:1px solid #000;
	float: left;
	/*background-image: url('divisorio.png');*/
	overflow:hidden;
}

In allegato trovate anche l'immagine.
Praticamente nei cerchietti verdi c'è il divisorio che vorrei fosse dell'altezza totale del containerTop.
Come vedete però si ferma li..
Come posso fare?
Grazie mille... :|

[Mich_]

IL divisorio non va inserito come elemento strutturale. Devi quindi togliere quei <div> senza significato semantico.

La cosa migliore e` inserire il divisorio nello sfondo del blocco contenitore (il tuo containerTop) con lo stesso sistema delle false colonne.
Nel tuo caso e` piu` difficile, dato che e` tutto elastico; puoi pero` usare i bordi dei blocchi che formano le colonne: ad esempio puoi inserire al blocco centrale:
border-top: 0;
border-bottom: 0;
border-left: 3px solid green; /* valori di esempio */
border-right: 3px solid green;

Se invece i bordi laterali sono piu` lunghi di quello centrale, inserisci i bordi relativi ai blocchi laterali

[ANTAGONIA]

allora...grazie per le dritte...ne ho un'altra sempre inerente a questa problematica.
la situazione è questa:

<style type="text/css" media="screen, projection">
p{margin: 0 0 0.8em 0}

div#containerNew{min-width: 100px;overflow:hidden;position:relative;right:35px;}
div#container1{background: #FFF url(css/leftP.gif) repeat-y 25%;overflow:hidden;}		
div#container2{background:  url(css/rightP.gif) repeat-y 75%;overflow:hidden;}

/*div#nav,div#extra{width:23%;\width:25%;w\idth:23%;padding: 0 1%}*/
div#nav,div#extra{width:25%;\width:27%;w\idth:25%;padding: 0 2%}
div#nav{float:left}
div#extra{float:right}

div#contentNew{margin: 10px 26%}
/*div#contentNew{margin: 0 36%}*/
div#contentNew p{line-height:1.3}

div#span{clear:both;}
</style>

<div id="containerNew">
	<div id="container1">

		<div id="container2">
			<div id="nav">
				<h2>Call Center, 25%</h2>
				

Il servizio è in funzione dal blah blah blah</p>
			</div>
			<div id="extra">
				<h2>Concerti, 25%</h2>
				

Guarda le Info relative ai concerti del mese</p>
			</div>
			<div id="contentNew">
				<h2>Band</h2>
				<address lang="it" title="indirizzo e recapiti fax e telefonici">
				  

via le mani dal naso, 1</p>
				  

00666 Vattelapesca</p>
				  

Fax.:666 -66-66-66</p>
			  </address>
			</div>
		</div>	
	</div>	
	<div id="span"></div>
	<div> 
		<div id='load'></div>
	</div>
</div>

Nell'immagine postata potete notare come la parte centrale il "contentNew" ha dimensioni in larghezza maggiori rispetto alle altre due laterali.
Come posso tramite il css postato interagire con questi 3 div per avere una larghezza al 33%?

Grazie mille...

[ANTAGONIA]

salve ragazzi, sono arrivato fino a questo punto, ma purtroppo non riesco a modificare le immagini in background cosi da averle con le stesse dimensioni dei pannelli a sinistra e a destra...

//facendo in questo modo ho dato il 33% a tutti e tre i div
div#nav,div#extra,div#contentNew{width:33%;\width:35%;w\idth:33%;border:1px solid 
#000}

//modificando la percentuale ho accentrato ancora meglio il div centrale contentNew
div#contentNew{margin: 0 33.40%;}

La cosa che vorrei capire è perchè modificando le percentuali dei background non riesco a dimensionarli come i rispettivi div#nav e div#extra.

//attraverso questi contenitori gestisco i background di sinistra e di destra..
div#container1{background: #FFF url(css/leftP.gif) repeat-y 25%;overflow:hidden;}
div#container2{background:  url(css/rightP.gif) repeat-y 75%;overflow:hidden;}

Nell'immagine postata potete vedere come la larghezza sia perfetta, mentre i background no...
Sapete come risolvere?
Grazie mille...

[ANTAGONIA]

ragazzi...potete aiutarmi per favore?non so più cosa fare...
ho modificato anche le immagini, rimpiccolendole, allargandole...ma niente..
ho agito anche sulle percentuali come sopra, ma niente...

ho assoluto bisogno ragazzi, per favore :|
grazie mille come sempre

[Mich_]

Puoi postare il link?
Non si riesce a capire cosa genera quell'effetto dai pezzetti di codice postato.

[ANTAGONIA]

il link non lo pposso postare perchè è in localhost.
Posto tutto il codice, abbiate pietà...

<style type="text/css" media="screen, projection">
p{margin: 0 0 0.8em 0}

div#containerNew{min-width: 100px;overflow:hidden;position:relative;right:35px;}
div#container1{background: #FFF url(css/leftP.gif) repeat-y 25%;overflow:hidden;}		
div#container2{background:  url(css/rightP.gif) repeat-y 75%;overflow:hidden;}

/*div#nav,div#extra{width:23%;\width:25%;w\idth:23%;padding: 0 1%}*/
div#nav,div#extra{width:25%;\width:27%;w\idth:25%;padding: 0 2%}
div#nav{float:left}
div#extra{float:right}

div#contentNew{margin: 10px 26%}
/*div#contentNew{margin: 0 36%}*/
div#contentNew p{line-height:1.3}

div#span{clear:both;}
</style>

<div id="containerNew">
	<div id="container1">

		<div id="container2">
			<div id="nav">
				<h2>Call Center, 25%</h2>
				

Il servizio è in funzione dal blah blah blah</p>
			</div>
			<div id="extra">
				<h2>Concerti, 25%</h2>
				

Guarda le Info relative ai concerti del mese</p>
			</div>
			<div id="contentNew">
				<h2>Band</h2>
				<address lang="it" title="indirizzo e recapiti fax e telefonici">
				  

via le mani dal naso, 1</p>
				  

00666 Vattelapesca</p>
				  

Fax.:666 -66-66-66</p>
			  </address>
			</div>
		</div>	
	</div>	
	<div id="span"> </div>
	<div> 
		<div id='load'></div>
	</div>
</div>

Posto anche le due immagini..
Spero cosi vada bene
L'allegato è la rightP.gif