Foros del Web » Creando para Internet » CSS »

Divs paralelos con width:auto

Estas en el tema de Divs paralelos con width:auto en el foro de CSS en Foros del Web. 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á ...
  #1 (permalink)  
Antiguo 30/03/2012, 14:10
 
Fecha de Ingreso: marzo-2012
Mensajes: 4
Antigüedad: 7 años, 8 meses
Puntos: 0
Divs paralelos con width:auto

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
  #2 (permalink)  
Antiguo 30/03/2012, 16:33
Avatar de Tedel  
Fecha de Ingreso: enero-2011
Ubicación: Lima
Mensajes: 2.744
Antigüedad: 8 años, 10 meses
Puntos: 444
Respuesta: Divs paralelos con width:auto

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.
__________________
Soy el autor de Heptagrama y tengo un servicio "todo incluido" de marketing web.
  #3 (permalink)  
Antiguo 30/03/2012, 22:07
Avatar de emprear
Colaborador
 
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 12 años, 5 meses
Puntos: 1567
Respuesta: Divs paralelos con width:auto

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
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <title>titulo</title>
  5. <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  6.  
  7. <style type="text/css">
  8. /*<![CDATA[*/
  9.  
  10. /* estilos */
  11. html, body, div{
  12. margin: 0;
  13. padding: 0;
  14. border: none;
  15. }
  16.  
  17. .contenedor{
  18. width: 80%;
  19. border: 1px #000 solid;
  20. }
  21. .contenedor2{
  22. border: 1px #000 solid;
  23. }
  24. .contenedor3{
  25. width: 600px;
  26. margin: 0 auto;
  27. border: 1px #000 solid;
  28. }
  29. .izq, der {
  30. float: left;
  31. }
  32. .izq {
  33. background-color: yellow;
  34. }
  35. .der{
  36. background-color: lime;
  37. }
  38.  
  39. .contenedor3 .izq {
  40. width: 180px;
  41. }
  42.  
  43. /*]]>*/
  44. </head>
  45. <div class="contenedor"><div class="izq">izquierda</div><div class="der">derecha</div></div>
  46. <div style="clear: both; margin: 5px 0;"><!-- limpiar floats --></div>
  47. <div class="contenedor2"><div class="izq">izquierda</div><div class="der">derecha</div></div>
  48. <div style="clear: both; margin: 5px 0;"><!-- limpiar floats --></div>
  49. <div class="contenedor3"><div class="izq">izquierda</div><div class="der">derecha</div></div>
  50. </body>
  51. </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
__________________
La voz de las antenas va, sustituyendo a Dios.
Cuando finalice la mutación, nueva edad media habrá
S.R.
  #4 (permalink)  
Antiguo 31/03/2012, 12:29
 
Fecha de Ingreso: marzo-2012
Mensajes: 4
Antigüedad: 7 años, 8 meses
Puntos: 0
Respuesta: Divs paralelos con width:auto

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.
  #5 (permalink)  
Antiguo 31/03/2012, 13:59
 
Fecha de Ingreso: marzo-2012
Mensajes: 4
Antigüedad: 7 años, 8 meses
Puntos: 0
Respuesta: Divs paralelos con width:auto

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
  #6 (permalink)  
Antiguo 31/03/2012, 16:41
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 12 años, 6 meses
Puntos: 539
Respuesta: Divs paralelos con width:auto

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
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #7 (permalink)  
Antiguo 01/04/2012, 12:07
 
Fecha de Ingreso: marzo-2012
Mensajes: 4
Antigüedad: 7 años, 8 meses
Puntos: 0
Respuesta: Divs paralelos con width:auto

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
  #8 (permalink)  
Antiguo 01/04/2012, 14:11
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 12 años, 6 meses
Puntos: 539
Respuesta: Divs paralelos con width:auto

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".
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++

Etiquetas: autoajustable, columnas, divs, paralelo
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 07:56.