Foros del Web » Creando para Internet » CSS »

Ayuda: como colocar 2 divs juntos, uno ancho fijo el otro variable

Estas en el tema de Ayuda: como colocar 2 divs juntos, uno ancho fijo el otro variable en el foro de CSS en Foros del Web. El titulo casi lo dice todo. Necesito colocar dentro de un div contenedor 2 divs, uno con anchura variable (el div principal se podrá redimensionar ...
  #1 (permalink)  
Antiguo 16/07/2009, 18:23
 
Fecha de Ingreso: julio-2009
Mensajes: 19
Antigüedad: 8 años, 4 meses
Puntos: 0
Ayuda: como colocar 2 divs juntos, uno ancho fijo el otro variable

El titulo casi lo dice todo. Necesito colocar dentro de un div contenedor 2 divs, uno con anchura variable (el div principal se podrá redimensionar manualmente) y el otro fijo, ambos con una img de background en "no-repeat".
¿Alguna idea como hacerlo? Yo he probado todo lo que conozco para que ambos DIVs ocupen la misma linea pero aún no he conseguido ni acercamele.

Código:
<div style="height:28px; width:500px; position:absolute;">
     <div style="background:url(img/topbar2_bg.png) no-repeat left; height:28px; width:100%; float:left;"></div>
     <div style="width:5px; height:28px; float:right; background:url(img/topbar_sideright.png) 0px 0;"></div>
</div>
Saludos y gracias desde ya.
  #2 (permalink)  
Antiguo 16/07/2009, 18:47
 
Fecha de Ingreso: mayo-2007
Mensajes: 348
Antigüedad: 10 años, 6 meses
Puntos: 9
Respuesta: Ayuda: como colocar 2 divs juntos, uno ancho fijo el otro variable

Pero el div padre ( con posicion absoluta ) tiene una anchura fija!

Ya que veo que le asignas 500px.
__________________
Debian Squeeze rules!
  #3 (permalink)  
Antiguo 16/07/2009, 18:48
 
Fecha de Ingreso: mayo-2007
Mensajes: 348
Antigüedad: 10 años, 6 meses
Puntos: 9
Respuesta: Ayuda: como colocar 2 divs juntos, uno ancho fijo el otro variable

Creo que te has confundido poniendole 500px al padre pero ahí va una solución

Código HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

	<html xmlns="http://www.w3.org/1999/xhtml" lang="es">
    
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin t&iacute;tulo</title>
<style type="text/css">

div#padre {
	 height:28px;
	 width:500px;
		background-color:#4f4f4f;
}
	div#left {
		float:left;
		height:28px;
		width:100%;
		margin-right:-5px;
		background-color:#c39;
	}
	
	div#right {
		float:left;
		width:5px;
		height:28px;
		background-color:#cc6;
	}
</style>

</head>

<body>

<div id="padre">
     <div id="left">left</div>
     <div id="right">right</div>
</div>
</body>
</html> 
Con poner en div#padre {width:100%; } obtendrás lo que quieres creo...

Un saludo.
__________________
Debian Squeeze rules!
  #4 (permalink)  
Antiguo 16/07/2009, 22:00
 
Fecha de Ingreso: julio-2009
Mensajes: 19
Antigüedad: 8 años, 4 meses
Puntos: 0
Respuesta: Ayuda: como colocar 2 divs juntos, uno ancho fijo el otro variable

O sea que la solución era colocar un margin negativo del tamaño del otro DIV???
Si hago lo mismo pero con el "margin-left:-5px" puedo poner otro div a su izquierda entonces??

Cita:
Con poner en div#padre {width:100%; } obtendrás lo que quieres creo...
El tamaño del DIV padre es solo orientativo para poder tener un tamaño para luego poder redimensionar a gusto. Si lo pusiera al 100% ocuparía toda la zona visible. Busco crear un marco para el contenido, un marco que pueda redimensionar.

Gracias, mientras voy a probar.

Agrego info:

Testeado, pero el fondo del DIV left pasa por debajo del DIV right. Busco que no se pisen. Alguna sugerencia?

Última edición por jonee; 16/07/2009 a las 22:16
  #5 (permalink)  
Antiguo 17/07/2009, 06:52
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Ayuda: como colocar 2 divs juntos, uno ancho fijo el otro variable

Hola jonee:
Eso que buscas es la estructura típica de página multicolumna.
Pero al no tener una idea global de lo que quieres hacer, es difícil imposible hacer una composición que se ajuste al 100% a lo que necesitas.
Un ejemplo sencillo de contenedor general en %, una columna a la derecha de anchura fija y a la izquierda otra que ocupa el resto.
Código html:
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" lang="es-es">
  3. <title>Kseso? jugando con css </title>
  4. <meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1" />
  5. <style type="text/css">
  6. *{margin:0;padding:0; outline:none; border:0; position: relative;}
  7.  
  8. #contenedor { background: #cdcdcd; height:28px; width:75%; margin:0 auto; overflow:auto; border:1px solid #444;}
  9. #uno {height:28px;display: inline;}
  10. #dos {width:5px; height:28px; float:right; background:#660;}
  11. #uno p {margin: .5em}
  12. </head>
  13. <div id="contenedor">
  14. <div id="dos">
  15. </div>
  16. <div id="uno">
  17. <p>el de la izquierda</p>
  18. </div>
  19. </div>
  20. </body>
  21. </html>

Hay muchas realizaciones de diseños multicolumna, unas con anchuras fijas y otras adaptativas a la ventana:
http://matthewjamestaylor.com
http://www.cssplay.co.uk/layouts
www.araudi.net

Un saludo
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++

Última edición por kseso?; 17/07/2009 a las 06:57
  #6 (permalink)  
Antiguo 17/07/2009, 08:03
 
Fecha de Ingreso: mayo-2007
Mensajes: 348
Antigüedad: 10 años, 6 meses
Puntos: 9
Respuesta: Ayuda: como colocar 2 divs juntos, uno ancho fijo el otro variable

Cita:
Iniciado por jonee Ver Mensaje
El tamaño del DIV padre es solo orientativo para poder tener un tamaño para luego poder redimensionar a gusto. Si lo pusiera al 100% ocuparía toda la zona visible. Busco crear un marco para el contenido, un marco que pueda redimensionar.
Me referia a que si tiene una ancho de 500px te va dar igual tener dentro un div en porcentajes, por que el tamaño siempre será el mismo... 500px.

Cita:
Iniciado por jonee Ver Mensaje
Testeado, pero el fondo del DIV left pasa por debajo del DIV right. Busco que no se pisen. Alguna sugerencia?
En que navegador?

Solo por gusto... pruebalo en uno moderno y verás que no se pisan. Si utilizas I.E quizás te pase eso por un posible margin double, deberás colocarle display:inline al div de la izquierda.

Un saludo.

Edito: Con I.E 7 va perfecto también.
__________________
Debian Squeeze rules!

Última edición por Nathan_1979; 17/07/2009 a las 08:09
  #7 (permalink)  
Antiguo 17/07/2009, 12:33
 
Fecha de Ingreso: julio-2009
Mensajes: 19
Antigüedad: 8 años, 4 meses
Puntos: 0
Respuesta: Ayuda: como colocar 2 divs juntos, uno ancho fijo el otro variable

Cita:
Iniciado por Nathan_1979 Ver Mensaje
Me referia a que si tiene una ancho de 500px te va dar igual tener dentro un div en porcentajes, por que el tamaño siempre será el mismo... 500px.
El ancho del padre lo modifico con JS. Necesita tener una anchura fija para poder visualizarse.

Cita:
Iniciado por Nathan_1979 Ver Mensaje
En que navegador?

Solo por gusto... pruebalo en uno moderno y verás que no se pisan. Si utilizas I.E quizás te pase eso por un posible margin double, deberás colocarle display:inline al div de la izquierda.
Yo uso FF 3.5 y despues lo testeo en otros browsers. Recuerda que hablo del fondo que es junto con el redimensionamiento lo que estoy buscando lograr.

No puedo aún pasarles la URL de mi proyecto, asi que seguiré intentando.
  #8 (permalink)  
Antiguo 17/07/2009, 12:48
 
Fecha de Ingreso: mayo-2007
Mensajes: 348
Antigüedad: 10 años, 6 meses
Puntos: 9
Respuesta: Ayuda: como colocar 2 divs juntos, uno ancho fijo el otro variable



No es esto lo que quieres?
__________________
Debian Squeeze rules!
  #9 (permalink)  
Antiguo 17/07/2009, 13:15
 
Fecha de Ingreso: julio-2009
Mensajes: 19
Antigüedad: 8 años, 4 meses
Puntos: 0
Respuesta: Ayuda: como colocar 2 divs juntos, uno ancho fijo el otro variable

Cita:
Iniciado por kseso? Ver Mensaje
Hola jonee:
Eso que buscas es la estructura típica de página multicolumna.
Pero al no tener una idea global de lo que quieres hacer, es difícil imposible hacer una composición que se ajuste al 100% a lo que necesitas.
Un ejemplo sencillo de contenedor general en %, una columna a la derecha de anchura fija y a la izquierda otra que ocupa el resto.
Código html:
Ver original
  1. <style type="text/css">
  2. *{margin:0;padding:0; outline:none; border:0; position: relative;}
  3.  
  4. #contenedor { background: #cdcdcd; height:28px; width:75%; margin:0 auto; overflow:auto; border:1px solid #444;}
  5. #uno {height:28px;display: inline;}
  6. #dos {width:5px; height:28px; float:right; background:#660;}
  7. #uno p {margin: .5em}
  8. </head>
  9. <div id="contenedor">
  10. <div id="dos">
  11. </div>
  12. <div id="uno">
  13. <p>el de la izquierda</p>
  14. </div>
  15. </div>
  16. </body>
  17. </html>

Hay muchas realizaciones de diseños multicolumna, unas con anchuras fijas y otras adaptativas a la ventana:


Un saludo
el "display: inline;" del #uno no me permite agregarle el Background.
Por loslinks, ahora los chequeo, gracias.
  #10 (permalink)  
Antiguo 17/07/2009, 13:17
 
Fecha de Ingreso: julio-2009
Mensajes: 19
Antigüedad: 8 años, 4 meses
Puntos: 0
Respuesta: Ayuda: como colocar 2 divs juntos, uno ancho fijo el otro variable

Cita:
Iniciado por Nathan_1979 Ver Mensaje
No es esto lo que quieres?
Si, y es lo que logra el CSS que me pasaste antes, pero lo logra con color de fondo, no con una imagen de fondo. La imagen del primer DIV se mete debajo del segundo DIV
  #11 (permalink)  
Antiguo 17/07/2009, 13:29
 
Fecha de Ingreso: julio-2009
Mensajes: 19
Antigüedad: 8 años, 4 meses
Puntos: 0
Respuesta: Ayuda: como colocar 2 divs juntos, uno ancho fijo el otro variable

Lo que necesito es que quede así:

h t t p : / / img232.imageshack.us/img232/4018/sample1f.jpg
====

Nathan_1979 tu código logra lo siguiente:

h t t p : / / img139.imageshack.us/img139/6587/sample2l.jpg

Espero que puedan verlo todos
  #12 (permalink)  
Antiguo 17/07/2009, 13:58
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Ayuda: como colocar 2 divs juntos, uno ancho fijo el otro variable

Cita:
Pero al no tener una idea global de lo que quieres hacer, es difícil imposible hacer una composición que se ajuste al 100% a lo que necesitas.
Para eso no necesitas dos cajas, con una basta, jonee.
La imagen que tienes, símplemente la haces lo suficientemente larga. Recortas la parte izquierda de la imagen y la colocas en el html dentro del div en cuestión.
La otra parte, via css como background no-fepeat right.

Así de sencillo. Si no me he explicado claramente, comenta.

Un saludo
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #13 (permalink)  
Antiguo 17/07/2009, 14:22
 
Fecha de Ingreso: julio-2009
Mensajes: 19
Antigüedad: 8 años, 4 meses
Puntos: 0
Respuesta: Ayuda: como colocar 2 divs juntos, uno ancho fijo el otro variable

Cita:
Iniciado por kseso? Ver Mensaje
Para eso no necesitas dos cajas, con una basta, jonee.
La imagen que tienes, símplemente la haces lo suficientemente larga. Recortas la parte izquierda de la imagen y la colocas en el html dentro del div en cuestión.
La otra parte, via css como background no-fepeat right.

Así de sencillo. Si no me he explicado claramente, comenta.
Un saludo
Lo que me explicas lo entiendo perfectamente, haber puede haber una imagen dentro del DIV, ya lo habia pensado pero el problema es el fondo siempre, por los bordes redondeados. en la imagen que puse se puede ver la imagen como deberia ser.
Es por eso que busco hacerlo en dos DIVS, uno al lado del otro, para cada uno tener su propio fondo y que no traigan conflicto visual.
Para realizar lo que hice en la imagen de "como deberia verse" coloque el fondo en blanco en el DIV de 5x28px con la imagen de fondo, pero como el fondo del body no es blanco, se vería mal.

Espero que se entienda
  #14 (permalink)  
Antiguo 17/07/2009, 15:20
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Ayuda: como colocar 2 divs juntos, uno ancho fijo el otro variable

Varias formas de corregir ese pequeño semicírculo que queda bajo la imagen:
Si el fondo que hay tras ella es de un color uniforme sencillo: la imagen un jpg (sin zonas transparente) y la esquina "vacía" que sea del mismo color que el fondo.
Si es un motivo, puedes añadirle un margen al div que contiene la imagen, ligéramente mayor a la zona "trasparente" de la imagen. La imagen pequeña que va dentro la desplazas los suficientes px para compensar el margen.

Todo esto sería más sencillo si pudiésemos utilizar css 3 y múltiples imágenes como backgrounds

Si no lo acabas de ver, busco algún ejemplo o te lo realizo. Ya dirás.

Un saludo
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #15 (permalink)  
Antiguo 17/07/2009, 15:54
 
Fecha de Ingreso: julio-2009
Mensajes: 19
Antigüedad: 8 años, 4 meses
Puntos: 0
Respuesta: Ayuda: como colocar 2 divs juntos, uno ancho fijo el otro variable

Cita:
Iniciado por kseso? Ver Mensaje
Varias formas de corregir ese pequeño semicírculo que queda bajo la imagen:
Si el fondo que hay tras ella es de un color uniforme sencillo: la imagen un jpg (sin zonas transparente) y la esquina "vacía" que sea del mismo color que el fondo.
Si es un motivo, puedes añadirle un margen al div que contiene la imagen, ligéramente mayor a la zona "trasparente" de la imagen. La imagen pequeña que va dentro la desplazas los suficientes px para compensar el margen.

Todo esto sería más sencillo si pudiésemos utilizar css 3 y múltiples imágenes como backgrounds

Si no lo acabas de ver, busco algún ejemplo o te lo realizo. Ya dirás.

Un saludo
Bueno, luego de taaanto intentar he encontrado la forma de hacer lo que quería gracias a uno de los enlaces que me proporcionaste,, viendo la opción de las 3 columnas. el código es el siguiente:
Cita:
<div style="position:relative; display:block;">

<div style="float:left; position:relative; width:5px; height:28px; left:0px; background: url(img/topbar_sideleft.png) no-repeat left;">
</div>
<div style="float:right; position:relative; width:5px; height:28px; right:0px; background: url(img/topbar_sideright.png) no-repeat right;">
</div>
<div style="margin-left:5px; margin-right:5px; position:relative; display:block; height:28px; background: url(img/topbar_bg.jpg) left">
</div>

</div>
Por el momento esta probado sin tener otro contenedor, pero funciona de la manera que queria, el DIV central se redimenciona al tamaño del contenedor, ahora en unos minutos voy a probar que tanto funciona agregandole el JS para redimencionar en DIV contenedor en forma manual.
  #16 (permalink)  
Antiguo 17/07/2009, 16:46
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Ayuda: como colocar 2 divs juntos, uno ancho fijo el otro variable

Me alegra saber que lo has conseguido, jonee.
Con algo más de tiempo para buscar otras técnicas, aquí tienes unas cuantas formas de conseguir esquinas redondeadas (curved corners):
Recopilación en Xyberneticos
cssplay
Recopilación en cssblog

Y si no es para este proyecto actual, quizás alguna te sirva en un futuro.

Un saludo
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #17 (permalink)  
Antiguo 17/07/2009, 18:20
 
Fecha de Ingreso: julio-2009
Mensajes: 19
Antigüedad: 8 años, 4 meses
Puntos: 0
Respuesta: Ayuda: como colocar 2 divs juntos, uno ancho fijo el otro variable

Cita:
Iniciado por kseso? Ver Mensaje
Me alegra saber que lo has conseguido, jonee.
Con algo más de tiempo para buscar otras técnicas, aquí tienes unas cuantas formas de conseguir esquinas redondeadas (curved corners):
Recopilación en...
Y si no es para este proyecto actual, quizás alguna te sirva en un futuro.
Un saludo
Gracias, después de mucho batallar lo he conseguido.
Con respecto a las esquinas redondeadas he sacado de este sitio pixelmator.com los CSS para dar a las imagenes border-radius (funcionan tanto en FF como en IE, Safari y Opera) pero como mis imagenes en este proyecto tienen un diseño más detallado y no tienen un color solido, no he podido implementarlo.

Gracias a todos por su tiempo, saludos!
  #18 (permalink)  
Antiguo 18/08/2014, 22:32
 
Fecha de Ingreso: noviembre-2008
Mensajes: 8
Antigüedad: 9 años, 1 mes
Puntos: 0
Respuesta: Ayuda: como colocar 2 divs juntos, uno ancho fijo el otro variable

Cita:
Iniciado por kseso? Ver Mensaje
Hola jonee:
Eso que buscas es la estructura típica de página multicolumna.
Pero al no tener una idea global de lo que quieres hacer, es difícil imposible hacer una composición que se ajuste al 100% a lo que necesitas.
Un ejemplo sencillo de contenedor general en %, una columna a la derecha de anchura fija y a la izquierda otra que ocupa el resto.
Código html:
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" lang="es-es">
  3. <title>Kseso? jugando con css </title>
  4. <meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1" />
  5. <style type="text/css">
  6. *{margin:0;padding:0; outline:none; border:0; position: relative;}
  7.  
  8. #contenedor { background: #cdcdcd; height:28px; width:75%; margin:0 auto; overflow:auto; border:1px solid #444;}
  9. #uno {height:28px;display: inline;}
  10. #dos {width:5px; height:28px; float:right; background:#660;}
  11. #uno p {margin: .5em}
  12. </head>
  13. <div id="contenedor">
  14. <div id="dos">
  15. </div>
  16. <div id="uno">
  17. <p>el de la izquierda</p>
  18. </div>
  19. </div>
  20. </body>
  21. </html>

Hay muchas realizaciones de diseños multicolumna, unas con anchuras fijas y otras adaptativas a la ventana:
[URL]http://matthewjamestaylor.com[/URL]
[URL]http://www.cssplay.co.uk/layouts[/URL]
[URL="http://www.araudi.net"]www.araudi.net[/URL]

Un saludo
Buen día, kseso? porfa ayúdeme con una cosa, es que necesito exactamente esto que usted puso. Que mi contenido se ajuste a la barra derecha (la barra derecha tiene un ancho fijo).
El contenido debería aparecer en la pantalla completa o ajustarse si la barra lateral existe.

Estoy trabajando en Drupal y la página es esta: http://revistalabarra.com.co/nuevo/
Cuando se ingresa, primeramente no sé porque los artículos no quedan bien pegados, sino que quedan huecos entre ellos :/

En el inicio aparece el contenido en la pantalla completa, pero cuando se ingresa a un articulo, se supone que la barra de "Archivos de noticias". "Archivos de eventos" es la barra lateral derecha, si hace scroll y baja, puede observar que abajo está el artículo. Así lo puse ya que en el ejemplo está de esta forma, la barra lateral derecha arriba y la izquierda abajo, se supone que se organiza con el CSS pero no he podido! D=
Porfa mire con el asistente del navegador y me dice si hay forma de hacer lo que quiero.
Gracias!
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 10:34.