Template liquido a tre colonne con css: problema immagine background

[eliodoro]

Template liquido a tre colonne con css: problema immagine background

Ciao a tutti,
ho un problema con l'immagine di background che non riesco a risolvere.

IL problema è il seguente: quando il contenuto nel main è breve la mia immagine viene tagliata e siccome serve anche da sfondo per il left va a impattare negativamente sulla grafica.

Ho cercato di semplificare al massimo il codice
[html]<div id="page">
<div id="wrapper">
<div id="box_banner">
<div id="cx">fcfcfcfcc gfgfgtf</div>
</div>
<div id="left_header">css</div>
<div id="right_header">css</div>
</div>
<div id="corpo">
<div id="main_body">
<div id="main">cvgcfgcfghcgc bvbnc vgftftytyf gfghrftydftyf vcftretvcc</div>
</div>
</div>
<div id="left_body">css</div>
<div id="right_body">css</div>
<div id="footer">vbvshgfuy nfgawjhgeq bytequtn bhgjrhhgu jhuiyiwhi ujyhuknklbtw jkygeuwahjgnwauy jksgu</div>
</div>
/CSS/

#page{
width: 100%;
}

#wrapper{
position:relative;
margin:0;
}
/* ------------inizio area header------------------------*/
#box_banner{
float:left;
width:100%;
}

#cx{
margin: 0 25%;
}

#left_header{
float:left;
width:25%;
margin-left:-100%;
}

#right_header{
float:left;
width:25%;
margin-left:-25%;
}
/* ------------fine area Header------------------------*/
#corpo{
float:left;
width:100%;
background: url(../images/black_bg_body.jpg) left top no-repeat ;
}

#main_body{
margin: 0 25%;
}

#main{
margin-right:20px;
}

/stili sinistra/
#left_body{
float:left;
width:25%;
margin-left:-100%;
}

/stili per destra/
#right_body{
float:left;
width:25%;
margin-left:-25%;
}

#footer{
width:100%;
margin:0;
clear:both;
}[/html]Ho provato in tutti i modi, ma propio non riesco a trovare la soluzione.

il comportamento che vi ho spiegato lo vedete a questo url: www.akunamatata.it/index.php?option=com_content&task=view&id=6&Itemid=1

[claudioweb]

CIao, benvenuto nel forum
@eliodoro said:

quando il contenuto nel main è breve la mia immagine viene tagliata
Puoi impostare l'altezza minima del main (è necessario fare un po' di giri per compatibilità) ad un valore che andrai a determinare con qualche test che ti consenta di risolvere il problema.

Devi quindi aggiungere nel css per il main:

min-height: XXXpx;
height: auto !important;
height: XXXpx;Dove XXX è appunto l'altezza minima in pixel che vorrai impostare.

[eliodoro]

Grazie Claudio
mi hai risolto un problema su cui mi stavo rompendo la testa da un pò di tempo!
Non conoscevo queste opzioni dell'height e del width.
Ho testato su exsplorer 6 e 7 firefox 2 e funziona perfettamente.

Ciao Eleonora