He encontrado una solución que quizás te pueda servir.
El código css quedaría de la siguiente forma.
Código CSS:
Ver originalhtml,body
{
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
img
{
border: none;
}
#hd
{
}
#ft
{
}
#zone_container
{
min-height: 100%;
width: 100%;
float: left;
width: 69%;
height: auto;
border: 1px solid #000000;
}
#zone_title
{
margin: 5px;
padding: 5px;
border: 1px solid #000;
}
#region_title
{
margin: 5px;
padding: 5px;
border: 1px solid #000;
}
#zone_content
{
border: 1px solid #000;
margin: 5px;
padding: 5px;
min-height: 100%;
overflow: hidden;
}
#finder_container
{
float: right;
width: 29%;
height: 100%;
border: 1px solid #000000;
}
.zone
{
background-color: #00ff80;
margin: 5px;
padding: 5px;
border: 3px solid #088a08;
min-height: 120px;
}
.zCentral
{
width: auto;
}
.zLeft
{
width: 45%;
float: left;
}
.zRight
{
width: 45%;
float: right;
}
.region
{
background-color: #01DFD7;
margin: 5px;
padding: 10px;
border: 2px solid #088A85;
min-height: 75px;
}
.rCol1
{
width: 20%;
}
.rCol2
{
width: 45%;
}
.rCol3
{
width: auto;
}
Únicamente he cambiado en el div.zone_container el height:auto. En el zone_content meterle un overflow: hidden. En zCentral quitarle el float: left y meterle un width: auto. Y finalmente en rCol3 cambiar el width:100% por width:auto.
Espero que te funcione. Pruébalo y nos cuentas!
La mayoría de los errores te venían dados por asignar un width o un height 100% a determinadas capas.