Problema de maquetación llevo varios días pero no soy capaz de conseguirlo, no domino bien css y creo que se me olvida algo.
El problema está en las 2 columnas que contienen 2 iframes.
En IE, la columna de la izquierda me aparece bien pero la columna de la derecha me aparece mucho más abajo.
En Firefox, las 2 columnas me aparecen bien ubicadas pero el alto de los iframes no es el 100%.
Mi objetivo es tener 2 columnas cada una con un iframe cuyo alto ocupe el resto de la página.
Este es mi código:
Código PHP:
<!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 runat="server">
<title></title>
<style type="text/css">
body {
color: #330000;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 8pt;
font-weight: normal;
background-color: #FFFFFF;
margin: 2px 4px 2px 4px;
padding: 0px 0px 0px 0px;
}
#divPage{
margin: auto;
}
#divHead{
border: 1px solid Red;
margin: 1px 0px 1px 0px;
padding: 0px;
}
#divTopMenu{
border: 1px solid Red;
margin: 1px 0px 1px 0px;
padding: 0px;
}
#divUser{
border: 1px solid Red;
margin: 1px 0px 1px 0px;
padding: 0px;
}
#divErrors {
border: 1px solid red;
margin: 1px 0px 1px 0px;
padding: 0px;
}
#divBody{
border: 1px solid red;
padding: 10px;
}
#divLeft{
border: 1px solid Blue;
float: left;
width: 200px;
margin: 0px;
padding: 0px;
}
#divRight{
border: 1px solid Blue;
margin-left: 206px;
padding: 0px;
}
</style>
</head>
<body>
<div id="divPage">
<div id="divHead">HEAD</div>
<div id="divTopMenu">MENU</div>
<div id="divUser">USER</div>
<div id="divErrors">ERRORS</div>
<div id="divBody">
<div id="divLeft"><iframe width="100%" height="100%" scrolling="auto" frameborder="0" src="http://www.google.com"></iframe></div>
<div id="divRight"><iframe width="100%" height="100%" scrolling="auto" frameborder="0" src="http://www.google.com"></iframe></div>
</div>
</div>
</body>
</html>
