css e layout a due colonne

[fit]

salve,
sto realizzando un template con un layout a due colonne (ciascuna con un colore differente) ma che, nel senso dell’altezza, devono camminare insieme.
Per fare questo ho inserito un div, che a sua volta contiene i due div delle colonne, dando come sfondo una immagine che porti i due colori delle colonne.
così che le due colonne vengono colorate da questo div che camminando mi riproduce l’immagine…e fin qui tutto ok.

ma non riesco a capire, nonostante le mille prove, perchè se metto un’altezza 100% in questo div (che contiene l’immagine di sfondo) non si vede l'immagine riprodotta ed è come se fosse trasparente, mentre se assegno un’altezza tipo 600px allora funziona.

Ma siccome la colonna di destra ha un elemento div che si espande (toggle) e quindi va oltre questa misura fissa stabilita il tutto non funziona più perchè lo sfondo rimane fisso alla dimensione fissata ed il div espandibile ci va sopra
.
non so se sono stata chiara ma potete darmi qualche consiglio a riguardo. grazie mille in anticipo!

[Simo990]

Ciao, il problema è che non si vede l'immagine di sfondo del div contenente le due colonne, se non gli viene data un'altezza fissa?
Puoi postare il codice così capiamo meglio?

[fit]

la pagina è così strutturata:




<div id="header"></div>





<div id="fascia_menu">
<ul id="menu">
[*]link
[*]link
[*]link
[*]link
[*]link
[*]link
[*]link
[/list]
</div>




da qua la parte che mi dà problemi con lo sfondo:



<div id="sf_content_page">

<div id="sx_img"> </div>


<div id="sf_dx_content">
<div class="content" id="dx_content">



<span class="title">Titolo pagina</span></p>


</p>


Contenuto descrittivo</p>


</div>
</div>
</div>





<div id="clear"></div>







<div class="footer" id="sx" >


dati footer azienda</p>
</div>

<div class="footer" id="dx" >


credits</p>
</div>




Andiamo ai css


#header {

width: 1000px;
height: 120px;
background-image:url(../img_style/sf_top.jpg);
background-repeat:no-repeat;

}

#fascia_menu {

width: 1000px;
height: 33px;
background: #22476C;

}

#sf_content_page {

width: 1000px;
height:600px;
background: url(../img_style/sf_content_page.jpg) repeat-y top right;

} (questo contiene una immagine che ha due colori cioè quelli delle due colonne)

#sx_img {

float: left;
width: 300px;
height:228px;
background-image:url(img.jpg);
background-repeat:no-repeat;
background-position:center bottom;
padding-top:0px;
margin:0px;

} la colonna di sinistra che confine a volte una immagine a volte un sottomenu

#sf_dx_content {

float: right;
height:600px;
background-image:url(../img_style/sf_portale.jpg);
background-position:right bottom;
background-repeat:no-repeat;


} (a sua volta la colonna di destra ha, a fondo pagina in basso a destra una immagine di sottofondo che mi identifica l'azienda stessa)

#dx_content {


width: 510px;
padding-top:30px;
margin:30px 40px 30px 70px;
text-align:justify;


} (questa è la seconda colonna vera e propria che contiene testo e toggle in una pagina specifica)

#clear {

clear:both;
width: 1000px;
height: 3px;

}


il css del footer è:

#sx {
height: 80px;
width: 700px;
padding-top: 10px;
padding-left:0px;
float:left;
}


#dx {
height: 80px;
width: 300px;
padding-top: 10px;
padding-right:0px;
float:right;
text-align:right;
}

[Simo990]

immagino sia #sf_content_page a darti problemi.

prova a modificare il CSS così, al posto di

background-image:url('../img_style/sf_content_page.jpg') repeat-y top right;

mettici

background-image:url('../img_style/sf_content_page.jpg');
background-repeat:repeat-y;

[fit]

è lo stesso....

appena do ad
height: 100%; (perchè lo voglio lungo per quanto è il testo che non è uguale per ogni pagina)
invece di height:600px;
mi scompare lo sfondo ossia l'immagine ripetuta.

[Simo990]

Se lo vuoi per quanto è lungo il testo non hai bisogno di specificare nessuna height. Senza specificarla ti funziona? Se no, puoi farmi vedere un esempio online?

[fit]

se non la specifico vedo tutto senza sfondo.
lo stesso risultato che ho inserendo height:100%;
ho fatto tante prove con div differenti ma ho sempr elo stesso problema....finchè l'altezza è specificata funzionata altrimenti non vedo sfondo.

purtroppo la pagina è in locale.

che altra prova posso fare?
provo a fare un div content e gli associo l'immagine di sfondo oppure gli associo il colore della colonna di sinistra che è la più corta....
...non so più che prova fare!