Foros del Web » Creando para Internet » CSS »

Div que ocupe ancho restante ante uno fijo

Estas en el tema de Div que ocupe ancho restante ante uno fijo en el foro de CSS en Foros del Web. 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. ...
  #1 (permalink)  
Antiguo 14/06/2009, 20:06
Avatar de hey_alan  
Fecha de Ingreso: diciembre-2006
Ubicación: México
Mensajes: 348
Antigüedad: 11 años
Puntos: 8
Pregunta Div que ocupe ancho restante ante uno fijo

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?
__________________
Alan Marth Media

Diseño web y Publicidad en Morelia, Michoacán
  #2 (permalink)  
Antiguo 15/06/2009, 01:03
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Div que ocupe ancho restante ante uno fijo

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.
  #3 (permalink)  
Antiguo 15/06/2009, 01:14
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Div que ocupe ancho restante ante uno fijo

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>
  #4 (permalink)  
Antiguo 15/06/2009, 02:26
 
Fecha de Ingreso: junio-2009
Ubicación: Reus, Tarragona, España
Mensajes: 63
Antigüedad: 8 años, 5 meses
Puntos: 1
Respuesta: Div que ocupe ancho restante ante uno fijo

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!
  #5 (permalink)  
Antiguo 15/06/2009, 05:33
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Div que ocupe ancho restante ante uno fijo

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.
  #6 (permalink)  
Antiguo 15/06/2009, 05:35
 
Fecha de Ingreso: junio-2008
Mensajes: 32
Antigüedad: 9 años, 5 meses
Puntos: 0
Respuesta: Div que ocupe ancho restante ante uno fijo

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

Saludos
  #7 (permalink)  
Antiguo 15/06/2009, 10:07
Avatar de hey_alan  
Fecha de Ingreso: diciembre-2006
Ubicación: México
Mensajes: 348
Antigüedad: 11 años
Puntos: 8
Respuesta: Div que ocupe ancho restante ante uno fijo

¡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!
__________________
Alan Marth Media

Diseño web y Publicidad en Morelia, Michoacán
  #8 (permalink)  
Antiguo 15/06/2009, 10:11
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Div que ocupe ancho restante ante uno fijo

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
  #9 (permalink)  
Antiguo 17/06/2009, 21:31
Avatar de hey_alan  
Fecha de Ingreso: diciembre-2006
Ubicación: México
Mensajes: 348
Antigüedad: 11 años
Puntos: 8
Respuesta: Div que ocupe ancho restante ante uno fijo

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.
__________________
Alan Marth Media

Diseño web y Publicidad en Morelia, Michoacán
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 12:06.