Ayuda para colocar unas capas

Como he comentado en un "post" anterior:
http://www.comocreartuweb.com/consultas/showthread.php/50701-Ayuda-…
El script que uso se "plega" a la izquierda, lo que me obliga a colocarlo a la izquierda de la página para que no se vea ese "pliegue" (aquí se ve como funciona)
http://www.miradaobjetiva.es/Pruebas/index.html
Esto me obliga a poner la capa con mi foto y mi descripción a la derecha del todo en lugar de a la izquierda como esta en el ejemplo.
Aqui veis remarcadas en colores distintos las capas (lo he echo con photoshop jajajaja)
http://www.miradaobjetiva.es/demo.png
Entonces por un lado si que se colocar las 3 capas de la izquierda (roja, amarilla y azul), pero no se poner la de mi descripccion a la derecha de esas 3 y de manera que quede todo como un bloque (como en la foto).
He pensado en hacer una especie de capa grande donde "descansen" las otras 3 (por eso la he remarcado entera de verde)
El caso es que no se como hacer la instruccion para que quede asi
En la hoja de estilos he creado todas las divs

#global
{
background-color:white ; 
border: #000 0px solid ; 
margin:80px 0px 0px 0px ; 
width: 957px ; 
height:560px;
float: left ; 
z-index:2;
}

#historia 
{
background-color:#000 ; 
border: #000 0px solid ; 
margin:0px 0px 0px 10px ; 
/*width: 200px ; 
height:370px;*/
float: left ; 
}

#superior 
{
background-color:#000 ;
border: #000 0px solid ; 
margin:-465px 0px 0px 0px ; 
float: left ; 
width: 720px ; 
}

#inferior 
{
/*background-color:#000 ;*/ 
border: #000 0px solid ; 
margin: 0px 0px 0px 0px ; 
float: left ; 
position:relative;
width: 1000px ; 
}

.cc_menu{
	width:720px; /*100px * 8*/
	/*background:pink;*/
	margin:-465px 0px 0px 0px;
	/*height:443px;*/
	position:relative;
	font-size:12px;
	border:0x solid #fff;
	/*text-transform:uppercase;*/
	color:#fff;
	}
.cc_item{
	text-align:center;
	width:90px;
	height:320px;
	float:left;
	border-bottom:1px solid #000;
	margin: 0px 0px 0px 0px ;
	background:black url(../images/fondo.png) repeat top left;
	position:relative;
	/*
	-moz-box-shadow:3px -3px 10px #000;
	-webkit-box-shadow:3px -3px 10px #000;
	box-shadow:3px -3px 10px #000;*/
}
/* "Titulo del navegador" */
span.cc_title{
	color:#fff;
	font-size:14px;
	top:180px;
	left:1px;
	position:absolute;
	padding:3px 0px;	
	background:#111;
	width:88px;
	height:50px;
	display:block;
	z-index:11;
	/*
	-moz-box-shadow:1px 1px 4px #000;
	-webkit-box-shadow:1px 1px 4px #000;
	box-shadow:1px 1px 4px #000;*/
}
.cc_submenu ul{
	list-style:none;
	width:90px;
	margin:0;
	padding:0;
	height:0px; /*increase to 200px to slide up*/
	overflow:hidden;
	text-align:left;
	background:#000;
	position:absolute;
	left:0px;
	bottom:0px;
	opacity:1.0;
	z-index:13;
}
.cc_submenu ul li{
	color:#ddd;
	cursor:pointer;
	padding:10px;
}
.cc_item img{
	position:absolute;
	width:90px;
	height:200px;
	top:-900px;
	left:0px;
}
.cc_content{
	width:600px;
	height:600px;
	border-bottom:3px solid #000;
	position:absolute;
	left:2000px;
	background:#444 url(../images/stripe.gif) repeat top left;
	overflow:hidden;
	/*
	-moz-box-shadow:4px 0 7px #000;
	-webkit-box-shadow:4px 0 7px #000;
	box-shadow:4px 0 7px #000;*/
}
.cc_content div{
	display:none;
	margin:20px;
}
.cc_content p{
	background:#000;
	padding:20px;
	opacity:0.7;
}
span.cc_back{
	position:absolute;
	bottom:10px;
	right:10px;
	cursor:pointer;
	color:#DDD;
}

Queriendo ser
"global" la verde
"superior" la roja
"inferior" la azul
Y llamada desde el html como

<div class="title"></div>
<div id="cc_menu" class="cc_menu">
<div class="cc_item" style="z-index:8;">
pues se coloca la zona del script que es la capa de color amarillo.

Esto es un metodo que he intentado hacer yo, pero me sirve tambien si me decis que en vez de colocar una capa como "fondo" de las demas, la posibilidad de poner simplemente mi descripcion como una capa pequeña a la derecha de las otras 3 eso si , haciendo que todo quede como si fuera un bloque.
Quizas haya que usar frames o tablas no lo se, me vuelvo loco.
Muchisimas gracias.
Si necesitais el html de como voy ahora (no puedo poner lo que es el script encima de la capa central) esta ahi:
http://www.miradaobjetiva.es/pruebas2/index.html
Perdon por lo extenso del post

hola

mira prueba con esto

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin t&iacute;tulo</title>
<link rel="stylesheet" href="ayuda2.css" type="text/css" media="all" />
</head>

<body>
<div id="global">
<div id="derecha">texto a la derecha de las capas</div>
<div id="cabecera">Galeria fotografica
</div>

<div id="contenido">contenido</div>
<div id="pie">pie</div>


</div>
</body>
</html>




* {margin:0px; padding:0px; text-indent:0px; border: 0px;}
body {text-align:center}

#global {background:#00CC99; width:800px; margin: 4px auto}
#cabecera {width:598px; background:red; height:150px}
#contenido {width:598px; background-color:yellow; height:400px}
#pie {width:598px; background-color: blue; height:150px; float:left}
#derecha { width:200px; background-color:black; height:700px; float: right}

le puse medidas fijas, pero ya sabes las alturas puedes quitarlas o modificarlas segun tu contenido

ya me contarás

saludos