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