Cómo hacer este Layout en CSS

[bookmark]

Hola a todos, estpu intentando hacer el layout en CSS de la siguiente web:

http://www.de-dietrich.es/

Donde supongo que hay un DIV que contiene un flash que se adapta a la resolución de cada usuario, y se redimensiona si se modifica la ventana del navegador.

El layout creo que debería ser algo como esto:



El problema es que el DIV MENU tiene anchura fija, y el DIV FLASH debe ser varibable para que se adapta a la anchura de la pantalla. Si pongo 100% se desborda por la derecha. Tampoco sé si la altura del DIV CONTENIDOR, que contiene estos dos DIV's debe se en % o no.
Podeis ver lo que hecho aquí.

En la web esta de www.de-dietrich.es, el DIV que contiene el flash escalable empieza en el 0, y no tiene este problema.

A ver si alguien me pudiera decir la mejor manera de hacer este layout.

Código HTML:

<div id="header">Header</div>
<div id="contenidor">
  <div id="menu">Menu</div>
  <div id="flash"><script language="javascript">
   if (AC_FL_RunContent == 0) {
      alert("Esta página requiere el archivo AC_RunActiveContent.js.");
   } else {
      AC_FL_RunContent(
         'codebase', 'http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0',
         'width', '100%',
         'height', '100%',
         'src', 'pandohome',
         'quality', 'high',
         'pluginspage', 'http://www.macromedia.com/go/getflashplayer',
         'align', 'middle',
         'play', 'true',
         'loop', 'true',
         'scale', 'noscale',
         'wmode', 'window',
         'devicefont', 'false',
         'id', 'pandohome',
         'bgcolor', '#000000',
         'name', 'pandohome',
         'menu', 'true',
         'allowFullScreen', 'false',
         'allowScriptAccess','sameDomain',
         'movie', 'pandohome',
         'salign', ''
         ); //end AC code
   }
</script>
<noscript>
   <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="100%" height="100%" id="pandohome" align="middle">
   <param name="allowScriptAccess" value="sameDomain" />
   <param name="allowFullScreen" value="false" />
   <param name="movie" value="pandohome.swf" /><param name="quality" value="high" /><param name="scale" value="noscale" /><param name="bgcolor" value="#000000" /> <embed src="pandohome.swf" quality="high" scale="noscale" bgcolor="#000000" width="100%" height="100%" name="pandohome" align="middle" allowScriptAccess="sameDomain" allowFullScreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
   </object>
</noscript></div>
  <div id="footer">Footer</div>
</div> 

CSS:

Código:

#header {
   height:100px;
   background-color:yellow;
}
#contenidor {
   position:absolute;
   top:100px;
   width:100%;
   height:80%;
   background-color:grey;
}
#menu {
   float:left;
   width:150px;
   height:100%;
   background-color:pink;
}
#flash {
   position: absolute;
   top: 0px; 
   left: 150px;
   float:left;
   width:100%;
   height:100%;
   background-color:green;
   overflow:hidden;
}
#footer {
   float:left;
   width:100%;
   height:50px;
   background-color:red;
}

Muchas gracias por la ayuda.

[Mikmoro]

Iniciado por bookmark

En la web esta de www.de-dietrich.es, el DIV que contiene el flash escalable empieza en el 0, y no tiene este problema.

Por que en realidad la columna izquierda (el menú), está SOBRE el objeto flash, que efectivamente ocupa el 100% de ancho y el 79% de alto

[buzu]

intenta quitando el ancho. El comportamiento normal de los elementos de bloque es llenar toda la pantalla. Si no funciona avisa y buscamos una solución más inteligente.

[buzu]

hummm, hice la prueba con fiorebug y al parecer no se soluciona el problema. Lo que puedes hacer es usar javascript para calcular el porcentaje de la pantalla que ocupa tu menu y le asignas el porcentaje restante a tu flash. Nada complicado, pero estoy casi seguro que debe haber una mejor forma de hacerlo.

[bookmark]

Buenas, simplemente que no he encontrado la solucón. No se entienden un div con un ancho fijo al lado de otro div con ancho al 100%.

Al final lo que he hecho es que los dos empiecen des de 0px, y el de 100% que esté por debajo del de ancho fijo.

Si alguien encuentra la solución se lo agradecería.

Saludos.

[Mikmoro]

Es exactamente lo que te dije que hacen en la página que pusiste como referencia:

Por que en realidad la columna izquierda (el menú), está SOBRE el objeto flash, que efectivamente ocupa el 100% de ancho y el 79% de alto

[buzu]

TE lo explico:

Tienes si tu ventana mide 1024 y tienes un elemento que mide 150 px y a lado le pones uno que mide 100% (1024), entonces es lógico que te de ese problema no crees? Te di una solución, tu encontraste otra, necesitas una más?

Saludos.

[bookmark]

Gracias a los dos, queda entendida esta solución.

Saludos,

Iniciado por buzu

TE lo explico:

Tienes si tu ventana mide 1024 y tienes un elemento que mide 150 px y a lado le pones uno que mide 100% (1024), entonces es lógico que te de ese problema no crees? Te di una solución, tu encontraste otra, necesitas una más?

Saludos.