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

jonee · #1 (**permalink**) 16/07/2009, 17:23

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.

Nathan_1979 · #2 (**permalink**) 16/07/2009, 17:47

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

Ya que veo que le asignas 500px.

Nathan_1979 · #3 (**permalink**) 16/07/2009, 17:48

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.

jonee · #4 (**permalink**) 16/07/2009, 21:00

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?

kseso? · #5 (**permalink**) 17/07/2009, 05:52

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<!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-es">
<head>
<title>Kseso? jugando con css </title>
<meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1" />
<style type="text/css">
*{margin:0;padding:0; outline:none; border:0; position: relative;}
 
#contenedor { background: #cdcdcd; height:28px; width:75%; margin:0 auto; overflow:auto; border:1px solid #444;}
#uno {height:28px;display: inline;}
#dos {width:5px; height:28px; float:right; background:#660;}
#uno p {margin: .5em}
</style>
</head>
<body>
<div id="contenedor">
<div id="dos">
</div>
<div id="uno">
<p>el de la izquierda</p>
</div>
</div>
</body>
</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

Nathan_1979 · #6 (**permalink**) 17/07/2009, 07:03

Cita:

Iniciado por jonee

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

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.

jonee · #7 (**permalink**) 17/07/2009, 11:33

Cita:

Iniciado por Nathan_1979

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

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.

Nathan_1979 · #8 (**permalink**) 17/07/2009, 11:48

No es esto lo que quieres?

jonee · #9 (**permalink**) 17/07/2009, 12:15

Cita:

Iniciado por kseso?

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<style type="text/css">
*{margin:0;padding:0; outline:none; border:0; position: relative;}
 
#contenedor { background: #cdcdcd; height:28px; width:75%; margin:0 auto; overflow:auto; border:1px solid #444;}
#uno {height:28px;display: inline;}
#dos {width:5px; height:28px; float:right; background:#660;}
#uno p {margin: .5em}
</style>
</head>
<body>
<div id="contenedor">
<div id="dos">
</div>
<div id="uno">
<p>el de la izquierda</p>
</div>
</div>
</body>
</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.

jonee · #10 (**permalink**) 17/07/2009, 12:17

Cita:

Iniciado por Nathan_1979

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

jonee · #11 (**permalink**) 17/07/2009, 12:29

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

kseso? · #12 (**permalink**) 17/07/2009, 12:58

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

jonee · #13 (**permalink**) 17/07/2009, 13:22

Cita:

Iniciado por kseso?

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

kseso? · #14 (**permalink**) 17/07/2009, 14:20

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

jonee · #15 (**permalink**) 17/07/2009, 14:54

Cita:

Iniciado por kseso?

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:

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.

kseso? · #16 (**permalink**) 17/07/2009, 15:46

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

jonee · #17 (**permalink**) 17/07/2009, 17:20

Cita:

Iniciado por kseso?

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!

crisnueve · #18 (**permalink**) 18/08/2014, 21:32

Cita:

Iniciado por kseso?

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<!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-es">
<head>
<title>Kseso? jugando con css </title>
<meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1" />
<style type="text/css">
*{margin:0;padding:0; outline:none; border:0; position: relative;}
 
#contenedor { background: #cdcdcd; height:28px; width:75%; margin:0 auto; overflow:auto; border:1px solid #444;}
#uno {height:28px;display: inline;}
#dos {width:5px; height:28px; float:right; background:#660;}
#uno p {margin: .5em}
</style>
</head>
<body>
<div id="contenedor">
<div id="dos">
</div>
<div id="uno">
<p>el de la izquierda</p>
</div>
</div>
</body>
</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!