Foros del Web » Creando para Internet » CSS »

Divs interiores no toman el width

Estas en el tema de Divs interiores no toman el width en el foro de CSS en Foros del Web. Bueno muchachos, tengo la siguiente estructura: Código HTML: <div id= "cont" > <div class= "lado" > partido 1 </div> <div class= "medio" > v/s </div> ...
  #1 (permalink)  
Antiguo 06/05/2012, 14:23
Avatar de goc00  
Fecha de Ingreso: enero-2002
Ubicación: 000's DiMensiOn
Mensajes: 979
Antigüedad: 17 años, 9 meses
Puntos: 3
Divs interiores no toman el width

Bueno muchachos, tengo la siguiente estructura:

Código HTML:
<div id="cont">
    <div class="lado">partido 1</div>
    <div class="medio">v/s</div>
    <div class="lado">partido 2</div>
</div>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​
Lo que deseo, es que el div con el class "medio", quede precisamente al medio siempre, independiente del tamaño de los div class "lado", y para esto lo más cercano que he logrado es:

Código HTML:
#cont {
    width: 200px;
    background-color: #FF0000;
}
#cont div {
    display: inline;
}
#cont div.medio {
    width: 40px;
    background-color: #00FF00;
}
#cont div.lado {
    width: 80px;
    background-color: #0000FF;
}​
Pero como podrán ver, estos el width de estos divs no los toma, entonces me quedan con un width automático, del tamaño del contenido. Acá les muestro como se me ve: http://jsfiddle.net/PKqMT/5/

Necesito entonces, que estos 3 divs queden ocupando el espacio completo del contenedor, así, me cercioraría de que el div de al medio siempre esté al centro...
__________________
GOC00 CominG soOn v2.0
CyA! & GooD LuCK...
  #2 (permalink)  
Antiguo 06/05/2012, 14:41
Avatar de Naahuel  
Fecha de Ingreso: marzo-2011
Ubicación: localhost
Mensajes: 796
Antigüedad: 8 años, 8 meses
Puntos: 192
Respuesta: Divs interiores no toman el width

Código HTML:
Ver original
  1. <!DOCTYPE html>
  2. <meta charset="utf-8" />
  3. <style type="text/css">
  4.     <!--
  5.     #cont{
  6.         /* Limpiar flotado */
  7.         overflow: hidden;
  8.         border: 1px dashed #CCC;
  9.     }
  10.     .lado{
  11.         width: 33%;
  12.         background: yellow;
  13.     }
  14.     .lado.izquierda{
  15.         float: left;
  16.     }
  17.     .lado.derecha{
  18.         float: right;
  19.     }
  20.     .medio{
  21.         float:left;
  22.         width: 34%;
  23.        
  24.         background: grey;
  25.     }
  26.     -->
  27.  
  28. </head>
  29.     <div id="cont">
  30.         <div class="lado izquierda">partido 1</div>
  31.         <div class="medio">v/s</div>
  32.         <div class="lado derecha">partido 2</div>
  33.     </div>
  34. </body>
  35. </html>
__________________
nahueljose.com.ar
  #3 (permalink)  
Antiguo 06/05/2012, 14:49
Avatar de goc00  
Fecha de Ingreso: enero-2002
Ubicación: 000's DiMensiOn
Mensajes: 979
Antigüedad: 17 años, 9 meses
Puntos: 3
Respuesta: Divs interiores no toman el width

Wuou, era más simple de lo que pensaba... ahora, como me gusta aprender más que puro copiar y pegar, ¿por qué utilizaste el overflow para "limpiar flotando"?, no entendí muy bien la idea.
__________________
GOC00 CominG soOn v2.0
CyA! & GooD LuCK...
  #4 (permalink)  
Antiguo 06/05/2012, 17:31
Avatar de Naahuel  
Fecha de Ingreso: marzo-2011
Ubicación: localhost
Mensajes: 796
Antigüedad: 8 años, 8 meses
Puntos: 192
Respuesta: Divs interiores no toman el width

Es un método para limpiar flotados que se aplica al contenedor (explicado acá: http://www.librosweb.es/css_avanzado...ar_floats.html )

Cuando floto un elemento, lo saco fuera del flujo de elementos y su contenedor ya no se ajusta a las dimensiones. Por eso se limpian los flotados para que el contenedor no se "aplaste" como si no tuviese nada adentro.

Ejemplo:
http://jsbin.com/ofipix

Fijate que el contenedor de abajo no tiene aplicado el overflow:hidden y entonces se "aplasta" como si estuviese vacío y el borde punteado se ve arriba solamente.

No es mi método favorito porque no siempre queremos un overflow hidden, por lo que prefiero usar el método micro clearfix hack de Nicolas Gallagher. Es mucho más elegante y efectivo.
__________________
nahueljose.com.ar
  #5 (permalink)  
Antiguo 06/05/2012, 20:52
Avatar de goc00  
Fecha de Ingreso: enero-2002
Ubicación: 000's DiMensiOn
Mensajes: 979
Antigüedad: 17 años, 9 meses
Puntos: 3
Respuesta: Divs interiores no toman el width

Clarísimo, excelente solución, muchas gracias.
__________________
GOC00 CominG soOn v2.0
CyA! & GooD LuCK...

Etiquetas: contenido, divs, tamaño, width, fondo
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 23:11.