Hola a todos estoy haciendo una página web para una empresa y tengo un problema con lo que seria la interficie gráfica.
La web consta de diferentes divs
uno principal que va de punta a punta (cabecera)
Debajo de este otro div que tambien va de punta a punta (menú)
Otro div debajo del menú que ocupa más o menos 3 cuartas partes de la página.
Otro div a la derecha del grande este que será como un panel de opciones (dimensiones variables dependiendo del que tiene al lado)
¿Como puedo hacer que el panel de opciones (derecha de todo) sea siempre igual de largo que el de al lado?
Gracias os paso el código para que veais como está la distribución de los divs.
Código:
<!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;
}
</style>
</head>
<body>
<div id="tota_web">
<div id="capsalera">Cabecera</div>
<div id="menu"> Menú<br />
</div>
<div id="contingut">
Contenido
</div>
<div id="zona_dreta">Menu opciones<br />
Este tiene que ser igual de largo que el lila
</div>
<div id="peu">
<p>pie</p>
</p>
</div>
</div>
<br />
</body>
</html>