Divs paralelos con width:auto

guillermoolmo · #1 (**permalink**) 30/03/2012, 13:10

Buenas tardes, me estoy encontrando un problema que no se como solucionar. Tengo un contenedor con dos capas en paralelo, la de la izquierda está con width:auto ya que es un menu con texto y la segunda (a la derecha) no soy capaz de que se extienda ocupando el resto del contenedor (puede variar el tamaño segun la pantalla de cada usuario) utilizando la propiedad width. En matematicas sería en la capa de la derecha poner width:100%-lo que ocupa la div izquierda.

Espero haberme explicado, dejo el codigo para que lo entiendan mejor:

<div id=”contenedor”>
<div id=”izquieda”>Menu</div>
<div id=”derecha”>Contenido paralelo a la capa “izquierda” y autoajustable a lo que sobre de la capa “contenedor”</div>
</div>

#contenedor{
margin-left:10%;
margin-right:10%;
margin-top:30px;
background:white;
}

#izquierda{
width:auto;
height:100%;
text-align: left;
margin-right: 30px;
position:relative;
padding-top:20px;
padding-bottom:20px;
padding-left:10px;
padding-right:10px;
float:left;
}

#derecha{
width:???????;/*No se lo que tengo que poner, si no pongo esta propiedad, funciona, pero necesito ponerla y si pongo 100% se me sale del contenedor por el margin-left y me tapa la capa izquierda*/
height:600px;
margin-left: 190px;/*Para respetar a #izquierda, seguro que hay otra manera para que esta capa empiece a continuación de la capa izquierda*/
position:relative;
}

Espero que me podais ayudar ya que estoy desesperado.

Un saludo y gracias de nuevo por anticipado

Tedel · #2 (**permalink**) 30/03/2012, 15:33

Bueno, te contaré un secreto: width no es obligatorio.

Si quieres lograr que una columna sea fija y la otra fluida, lo único que necesitas hacer es...

1. Hacer el contenedor fuido:

#contenedor
{margin: 30px 10% auto; position: relative}

2. Haz la columna de la izquierda fija, no de ancho automático. Al fin y al cabo, solo irá allí el menu:

#left
{position: absolute; top: lo necesario; width: 200px}

3. Haz la columna derecha fluida y dile que empiece donde terminó el otro

#right
{position absolute; top: lo necesario; left: 220px; right: 0}

Con esto...

- El contenedor se centrará
- La columna izquierda será fija de 200px de ancho
- La columna derecha será un rectángulo que empiece en el píxel 220, contando desde la izquierda y termine en el píxel número 0, contando desde la derecha. O sea, tomará todo el espacio restante.

Aderece al gusto y sírvase.

emprear · #3 (**permalink**) 30/03/2012, 21:07

En primer lugar, bienvenido @guillermoolmo
Con respecto a tu problema, es bastante más simple de lo que estás intentando

Código HTML:

Ver original<!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>
<title>titulo</title> 
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
 
<style type="text/css">
/*<![CDATA[*/
 
/* estilos */ 
html, body, div{
margin: 0;
padding: 0;
border: none;
}
 
.contenedor{
width: 80%;
border: 1px #000 solid;
}
.contenedor2{
border: 1px #000 solid;
}
.contenedor3{
width: 600px;
margin: 0 auto;
border: 1px #000 solid;
}
.izq, der {
float: left;
}
.izq {
background-color: yellow;
}
.der{
background-color: lime;
}
 
.contenedor3 .izq {
width: 180px;
}
 
/*]]>*/
</style>
</head>
<body>
<div class="contenedor"><div class="izq">izquierda</div><div class="der">derecha</div></div>
<div style="clear: both; margin: 5px 0;"><!-- limpiar floats --></div>
<div class="contenedor2"><div class="izq">izquierda</div><div class="der">derecha</div></div>
<div style="clear: both; margin: 5px 0;"><!-- limpiar floats --></div>
<div class="contenedor3"><div class="izq">izquierda</div><div class="der">derecha</div></div>
</body>
</html>

Como ves en los ejemplos hay tres contenedores de diferentes medidas, con %, sin nada (es decir al 100%) en px. Que le fijes un ancho a tu div izquierdo es completamente opcional, tampoco es necesario posicionar ninguna capa.
Saludos

guillermoolmo · #4 (**permalink**) 31/03/2012, 11:29

Muchisimas gracias a los dos.

El codigo de emprear parece mas limpio pero el problema es que al ponerle luego a la capa derecha la propiedad overflow:scroll, esa capa derecha se hace mas pequeña y no me vale para el estilo de pagina que estoy haciendo.

Con el codigo de Tedel si que funciona lo unico es que ahora el contenedor principal me corta la capa derecha por abajo, es decir, no se hace tan alto el contenedor como la capa derecha ¿como puedo solucionarlo?

Muchas gracias de nuevo, sois unos fenomenos.

guillermoolmo · #5 (**permalink**) 31/03/2012, 12:59

Puffff, a ver si me podeis ayudar porque ahora si que me estoy liando.

La idea de mi pagina es un contenedor general que contenga una capa que es la cabecera (donde voy a poner el logo de la empresa), abajo una capa la izquierda que tiene el menú, a su derecha en paralelo una capa que va a ser donde se muestre todo el contenido y por ultimo abajo un pie de pagina.

Yo lo tenia asi:

<div id="contenedor">

<div id=cabecera"></div>
<div clear="both"> /*para dar salto*/
</div>
<div id="contenedor_central">
<div id="menu_izquierda"></div>
<div id="derecha"></div>
</div>
<div clear="both"> /*para dar salto*/
</div>
<div id="pie"></div>
<div clear="both"> /*para dar salto*/
</div>

</div>

Y ahora ya no se que tengo que poner en position absolute o relative para que crezca el "contenedor" a medida que crece "derecha" y para colocar todo bien.

AYUDA!!!!!!! Por favor!!!! Me estoy desesperando.

Un saludo y gracias de antemano

kseso? · #6 (**permalink**) 31/03/2012, 15:41

La típica estructura de cabeza-pie y cuerpo a dos columnas.
Una caja flotada y con anchura declarada ( su menú) y apareciendo primero en el html que la "derecha" (sin flotar y sin anchura).
Con eso, "derecha" ocupará el espacio libre de su "contenedor_central" y al no haberlo sacado del flujo lo forzará a crecer en altura. Y de paso se ahorra todos los clear.

Una sencilla búsqueda por "layout css" y le aparecerán a miles

guillermoolmo · #7 (**permalink**) 01/04/2012, 11:07

Muchas gracias, al final lo he solucionado como decias. He cogido una de las multiples plantillas de capas con la estructura que yo queria y lo he ido rellenando.

Un saludo

kseso? · #8 (**permalink**) 01/04/2012, 13:11

Si se ha limitado sólo a "coger una de las multiples plantillas de capas con la estructura que quería y lo he ido rellenando" y no ha comparado tanto el css como el html del ejemplo y suyos, poco favor nos hemos hecho mutuamente.

Y resalto con el subrayado el "sólo a".