Div que ocupe ancho restante ante uno fijo

hey_alan · #1 (**permalink**) 14/06/2009, 19:06

Observen la siguiente imagen:

Las cajas de color verde son de ancho relativo (en porcentaje).

La caja de color rojo es de un tamaño fijo.

Tengo un contenedor, dentro contiene dos divs flotantes. La primera mide 140px de ancho. Quiero que la segunda, estando a la misma altura, ocupe el ancho restante. Esto teniendo en mente que la div contenedora es de ancho relativo.

¿Cómo se puede lograr?

Mikmoro · #2 (**permalink**) 15/06/2009, 00:03

No le des ancho a la caja verde interior, flota la roja (float: left) y la verde no. Sólo dale el margen que te interese y debería ocupar el resto del espacio disponible.

Mikmoro · #3 (**permalink**) 15/06/2009, 00:14

Me he entretenido haciendo un ejemplo:

Cita:

<!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" xml:lang="es" lang="es-es">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
* { padding:0; margin:0;}
html, body {height:100%;}
#contenedor {width: 50%;border: 1px solid #0f0; margin: 20px auto;background-color: #000;}
#izquierda {height:300px; width: 140px; float: left; border: 1px solid #f00; margin: 10px;}
#derecha {height:300px;border: 1px solid #0f0;margin: 10px 10px 10px 160px;}
</style>
</head>
<body>
<div id="contenedor">
<div id="izquierda"></div>
<div id="derecha"></div>
</div>
</body>
</html>

Sam_Enfot · #4 (**permalink**) 15/06/2009, 01:26

Hola,

Mikmoro, le has dado al contenedor verde interior un margen-izquierda de 160px ?

Debido a que el contenedor rojo tiene 140px de ancho no?

140 + margenes -> 160px de margen el otro contenedor.

Es así? Esque es lo que me ha parecido y es para confirmar...

Es muy, muy buena idea.

Me aprobecho de ella, y por cierto aprobecho tambien para agradecerte la publicacion de todo lo que publicaste en tu pagina de RECURSOS, hace poco que me la dieron a conocer, pero ya he estado muchas horas navegando por ella.

Saludos!, Sam Enfot!

Mikmoro · #5 (**permalink**) 15/06/2009, 04:33

Hola, Sam_Enfot.
Sí, es exactamente eso: 140px de ancho + 10px de margen izquierdo que tiene la caja roja + 10px para que haya algo de separación entre ellas = 160px.

Me alegro de que te hayan gustado algunas cosillas de la página. Siéntete libre de usar todo lo que quieras y como quieras; es de libre disposición (sin licencia).

Un saludo.

Telerama · #6 (**permalink**) 15/06/2009, 04:35

Excelente, gracias Mikmoro, voy a probar cosas también con eso!

Saludos

hey_alan · #7 (**permalink**) 15/06/2009, 09:07

¡Perfecto! A funcionado a la perfección, muchas gracias Mikmoro, ha sido una respuesta efectiva.

Una última cosa: En IE6 cuando reduces el ancho de la ventana a tal grado que el div verde interior se reduzca a cero, ocurre un efecto extraño (a veces se salta de línea o desaparecen) ¿Habrá forma de solucionarlo?.

Como sea, eso no es crucial, no creo que nadie quiera ver la página en ese tamaño :P.

Thanks!

Mikmoro · #8 (**permalink**) 15/06/2009, 09:11

Sí, si fuera importante lo podríamos hacer metiendo una caja oculta con un ancho mínimo detrás de ellas o algo así, porque el hecho de que salte abajo es porque ya no cabe, al ser la ventanatan ancha como la caja izquierda.

Pero bueno, como dices, en un caso real habría que buscar una solución, no siendo relevante ahora mismo. Maldito IE6

hey_alan · #9 (**permalink**) 17/06/2009, 20:31

Me surgió un pequeño problema...

Cuando en el div interno verde (que tu haz nombrado como "#derecha") inserto un div con un "clear:both;", todo lo que sigue me lo echa hasta el final del div de color rojo ("#izquierda").

¿Cómo se puede solucionar?

PD: Esa div no la inserto voluntariamente. Lo que sucede es que es para un layout de blogger, y siempre al principio del contenido de cada entrada inserta esa div para eliminar los elementos flotantes de los costados.

Saludos y muchas gracias.