Mirá. Yo trabajo como diseñador web. Como me cansé de usar divs para todo empezé mezclarlos con tablas del tipo <table border="0" cellspacing="0" cellpadding="0">
En tu caso sería borra el contingut y el zona_dreta
Y en su lugar poner una tabla así:
<table width="1020" border="1" cellspacing="0" cellpadding="0">
<tr>
<td width="900" height="230"></td>
<td>
</td>
</tr>
</table>
Código HTML:
<!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ítulo</title>
<style type="text/css">
#tota_web {
margin:auto;
background-color:#CF6;
width:1024px;
height:auto;
z-index:1;
display:table;
}
#capsalera{
width:1024px;
height:100px;
background-color:#09F;
margin-bottom:5px;
}
#peu{
width:1024px;
margin-top:5px;
height:30px;
background-color:#F00;
margin-bottom:5px;
float:left;
}
#menu {
background-color:#C9F;
padding-left:5px;
width:1019px;
overflow:hidden;
display:compact;
float:left;
margin-bottom:5px;
}
#contingut {
display:table;
width:900px;
height:230px;
background-color:#C3F;
float:left;
}
#zona_dreta {
position:relative;
width:120px;
background-color:#0FF;
float:left;
padding-left:4px;
display:table-column;
height:inherit;
}
</style>
</head>
<body>
<div id="tota_web">
<div id="capsalera">Cabecera</div>
<div id="menu"> Menú<br />
</div>
<table width="1020" border="0" cellspacing="1" cellpadding="0">
<tr>
<td width="900" height="230" valign="top" bgcolor="#0066FF"></td>
<td valign="top" bgcolor="#C3F">
</td>
</tr>
</table>
<div id="peu">
<p>pie</p>
</p>
</div>
</div>
<br />
</body>
</html>