Hola, estoy intentando crear un template para ser usado posteriormente en diferentes paginas, por lo tanto estoy intentando hacerlo lo mas estandarizado posible pero me encuentro con un problema. El template contiene tres div. El primero es el menu y esta flotando hacia la izquerda. Este div no tiene ningun ancho fijo si no que se adapta al contenido. Luego tengo un segundo div que tambien esta flotando hacia la izquerda pero si tiene un ancho fijo. El tercer div esta flotando hacia la derecha sin ancho fijo. En el fondo tengo tres columnas.
Ahora bien, cuando en el template se utiliza la columna de la derecha, es decir el tercer div, todo se ve bien, genial, no problema. Pero como no siempre se utilizara ese tercer div no puedo contar con que siempre este ahí, asi que cuando pruebo el template sin el tercer div me queda ese espacio en blanco ya que el segundo div tiene un ancho fijo. Si ni utilizo un ancho fijo en el segundo div este automaticamente asume 100% lo que produce que el div me utiliza todo el ancho de la pagina colocandose debajdo del primer div.
Como puedo hacer que el segundo div se adapte en relacion al tercer div? es decir si el tercer div esta presente el segundo div disminuye su ancho?
Mi css y html se ve asi:
Código:
<html>
<head></head>
<body>
<div id="wrapper">
<div id="menu">
<ul>
<li>...
</ul>
</div>
<div id="area1">
<%-- Contenido del segundo div, nada con ancho fijo aqui --%>
</div>
<div id="area2">
<%-- Contenido del tercer div, nada con ancho fijo aqui --%>
</div>
</div>
</body>
</html>
Código:
#wrapper {
margin: 0;
padding: 0;
}
#menu {
float: left;
}
#area1 {
float: left;
width: 700px; /* ---- ancho fijo si se esta utilizando el tercer div -----*/
}
#area2 {
float: right;
}
Alguna idea de como hacer el segundo div con un ancho mas dinamico?
/Americo