Código HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.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">
.flex {
display: block;
}
* html .flex {
height: 1%;
}
#Tabla_01 #contenido {
width: 400px;
float: right;
margin-top: 0px;
margin-right: 0px;
margin-bottom: -2000px;
margin-left: 0px;
padding-bottom: 2000px;
}
#pie {
background-color: #CC0099;
width: 800px;
margin-right: auto;
margin-left: auto;
}
#Tabla_01 #logo {
background-color: #006699;
}
#Tabla_01 {
width: 800px;
margin-right: auto;
margin-left: auto;
background-color: #990099;
overflow: hidden;
}
#titulo {
background-color: #FF3366;
}
#Tabla_01 #menusup {
height: 50px;
background-color: #00CC99;
}
#Tabla_01 #menusupder {
float: right;
width: 200px;
background-color: #FF66CC;
margin-bottom: -2000px;
padding-bottom: 2000px;
}
#Tabla_01 #menuleft {
background-color: #9999FF;
float: left;
width: 200px;
margin-bottom: -2000px;
padding-bottom: 2000px;
}
#Tabla_01 #logo #buscar {
background-color: #FF33CC;
height: 50px;
width: 800px;
}
#Tabla_01 #content {
float: left;
width: 400px;
background-color: #006633;
}
</style>
</head>
<body>
<div id="titulo">titulo</div>
<div class="flex" id="Tabla_01">
<div id="logo">menu</div>
<div class="flex" id="menusupder">
<p>munu dereccha</p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</div>
<div class="flex" id="menuleft">menu izquierda</div>
<div id="contenido"> contenido contenido contenido contenido contenido
contenido contenido contenido contenido contenido contenido contenido
contenido contenido contenido contenido contenido</div>
</div>
<div id="pie">
<p>pie</p>
<p> </p>
<p> </p>
</div>
</body>
</html> esto es definitivo con esto que te mando si lo controlas puedes hacer lo que quieras. jaimesimo.net