Divs interiores no toman el width

goc00 · #1 (**permalink**) 06/05/2012, 13:23

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...

Naahuel · #2 (**permalink**) 06/05/2012, 13:41

Código HTML:

Ver original<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style type="text/css">
    <!--
    #cont{
        /* Limpiar flotado */
        overflow: hidden; 
        border: 1px dashed #CCC;
    }
    .lado{
        width: 33%;
        background: yellow;
    }
    .lado.izquierda{
        float: left;
    }
    .lado.derecha{
        float: right;
    }
    .medio{
        float:left;
        width: 34%;
        
        background: grey;
    }
    -->
</style>
 
<title></title>
</head>
<body>
    <div id="cont">
        <div class="lado izquierda">partido 1</div>
        <div class="medio">v/s</div>
        <div class="lado derecha">partido 2</div>
    </div>
</body>
</html>

goc00 · #3 (**permalink**) 06/05/2012, 13:49

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.

Naahuel · #4 (**permalink**) 06/05/2012, 16:31

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.

goc00 · #5 (**permalink**) 06/05/2012, 19:52

Clarísimo, excelente solución, muchas gracias.