¿Dividir una página en 8 columnas fluidas perfectas?

Entonces, estoy tratando de dividir una página (de hecho, solo un pie de página) en 8 columnas fluidas iguales (apuntaba a 6), y la única forma en que pensé que podría hacerlo es con un porcentaje.

puse un porcentaje de width: 12.5%; a cada una de las columnas (que son en realidad unos enlaces establecidos como display: block; float: left;) y debería haber funcionado, pero no lo hizo. Me refiero a que las columnas o los enlaces deberían haberse dividido por igual en la página, pero todavía hay algo de espacio allí, aproximadamente 100px (mi pantalla tiene 1366px de ancho ).

Entonces, ¿qué debo hacer al respecto? ¿Cómo puedo dividir los enlaces/columnas en 8 (preferiblemente 6) columnas fluidas iguales?

<footer>
    <div class="footer-jigsaw"></div>
    <div class="footer-wrapper">
        <nav class="navigation">
            <a href=""></a>
            <a href=""></a>
            <a href=""></a>
            <a href=""></a>
            <a href=""></a>
            <a href=""></a>
        </nav>
    </div>
</footer>

footer {
    position:absolute;
    bottom:0;
    left:0;
    width:100%;
    height:50px;
    background-image:url(../gfx/background-light.png);
    background-position:center center;
    background-repeat:repeat;
    -webkit-opacity:0;
    -moz-opacity:0;
    opacity:0;
    filter:alpha(opacity=0);
}

footer .footer-jigsaw {
    position:absolute;
    top:0;
    width:100%;
    height:10px;
    background-image:url(../gfx/footer.png);
    background-position:0 center;
    background-repeat:repeat-x;
    z-index:5;
}

footer .footer-wrapper {
    position:relative;
    margin:0 auto;
    width:100%;
    height:50px;
}

footer .footer-wrapper .navigation {
    position:relative;
    margin:0 auto;
    width:100%;
    height:50px;
}

footer .footer-wrapper .navigation a {
    position:relative;
    float:left;
    display:block;
    cursor:pointer;
    width:12.5%;
    height:50px;
    padding-top:0;
    padding-left:10px;
    padding-right:10px;
    padding-bottom:0;
    font-family:good-times-bad-times;
    font-size:inherit;
    font-style:normal;
    font-weight:400;
    font-variant:normal;
    text-align:center;
    text-decoration:none;
    text-shadow:none;
    text-indent:inherit;
    text-transform:none;
    word-spacing:normal;
    line-height:58px;
    letter-spacing:normal;
    color:#fff;
    -webkit-transition:all .35s ease-in-out;
    -moz-transition:all .35s ease-in-out;
    -ms-transition:all .35s ease-in-out;
    -o-transition:all .35s ease-in-out;
    transition:all .35s ease-in-out;
}

footer .footer-wrapper .navigation a:first-child {
    border:none;
}

footer .footer-wrapper .navigation a:last-child {
    border:none;
}

footer .footer-wrapper .navigation a.jp-current {
    background-color:rgba(0,0,0,0.2);
    font-family:good-times-bad-times;
    font-size:inherit;
    font-style:normal;
    font-weight:400;
    font-variant:normal;
    text-align:center;
    text-decoration:none;
    text-shadow:none;
    text-indent:inherit;
    text-transform:none;
    word-spacing:normal;
    line-height:58px;
    letter-spacing:normal;
    color:#00b8f0;
}

footer .footer-wrapper .navigation a.jp-current:hover {
    background-color:rgba(0,0,0,0.2);
    font-family:good-times-bad-times;
    font-size:inherit;
    font-style:normal;
    font-weight:400;
    font-variant:normal;
    text-align:center;
    text-decoration:none;
    text-shadow:none;
    text-indent:inherit;
    text-transform:none;
    word-spacing:normal;
    line-height:58px;
    letter-spacing:normal;
    color:#00b8f0;
}

footer .footer-wrapper .navigation a:hover {
    background-color:rgba(0,0,0,0.2);
    font-family:good-times-bad-times;
    font-size:inherit;
    font-style:normal;
    font-weight:400;
    font-variant:normal;
    text-align:center;
    text-decoration:none;
    text-shadow:none;
    text-indent:inherit;
    text-transform:none;
    word-spacing:normal;
    line-height:58px;
    letter-spacing:normal;
    color:#00b8f0;
}

Arriba es una parte de todo el CSS, pero ahí es donde estoy tratando de hacer lo que acabo de mencionar.

Problema resuelto: relleno extra agregado a los bloques;

preguntado el 03 de mayo de 12 a las 16:05

Muéstranos el código o no podremos ayudarte. jsfiddle.net es un buen lugar para comenzar

Consulte Twitter Bootstrap o 960 Grid System. No reinventes la rueda. -

@binarious: no estoy tratando de hacer eso para toda mi página, lo quiero solo para mi pie de página, sin espacios entre los bloques, sin relleno ni márgenes, solo 6 u 8 bloques simples que se distribuyen por igual a lo largo de la página. ancho. Conozco el bootstrap, pero no me siento cómodo usando ningún marco (aunque suena estúpido). -

¿Puedes publicar también el HTML básico del pie de página? Puede ser relevante. Un jsfiddle o un enlace a una página en vivo es aún mejor. Además, ¿este plan es CSS o está usando LESS o Sass/SCSS? Si es CSS genérico, entonces tienes algunos problemas de CSS. -

Estoy usando LESS, pero el HTML lo genera un complemento, de todos modos, pegaré lo que sale en el navegador. -

2 Respuestas

No, no proporcionaré soporte para IE en absoluto.

Fantástico. En ese caso, puede utilizar display: table (sin soporte en IE7) junto con table-layout: fixed (para asegurar columnas de igual anchura).

Se admite automáticamente cualquier número de columnas y, como beneficio adicional, obtiene columnas de la misma altura de forma gratuita.

Aquí hay una demostración con su HTML: http://jsfiddle.net/thirtydot/KusjP/

.navigation {
    display: table;
    table-layout: fixed;
    width: 100%;
}
.navigation > a {
    display: table-cell;
    border: 1px solid #444;
}

contestado el 03 de mayo de 12 a las 17:05

Eso funcionaría, solo que no estoy usando pantallas de mesa. Aunque vi en el bootstrap de twitter, hecho con LESS, usando algo como esto en combinación con MQ. - Roland

BESO

http://jsfiddle.net/QjsSA/1/

Usando su código original: http://jsfiddle.net/QjsSA/2/

<footer>
    <div class="footer-jigsaw"></div>
    <div class="footer-wrapper">
        <nav class="navigation">
            <a href="">Fluid Column Fluid Column Fluid Column Fluid Column Fluid Column</a>
            <a href="">Fluid Column</a>
            <a href="">Fluid Column Fluid Column Fluid Column Fluid Column</a>
            <a href="">Fluid Column</a>
            <a href="">Fluid Column Fluid Column Fluid Column</a>
            <a href="">Fluid Column</a>
        </nav>
    </div>
</footer>

CO

.navigation {
    overflow: auto;
    background: gray;   
}

.navigation a {
    width: 16.6%;
    float: left;
    display: block;
    border-bottom: 1px solid black;
}
​

contestado el 03 de mayo de 12 a las 17:05

Idealmente, debe incluir el código de su demostración en su respuesta. (No voté en contra.) - treinta y dos

Exactamente. Si jsfiddle falla, su respuesta no tiene sentido. Por favor, hágalo y eliminaré mi voto. - Fantasma de Madara

Esto es lo mismo que estoy haciendo, pero el mismo resultado. Además, estoy flotando los elementos a la izquierda. - Roland

Roland, ¿qué está haciendo que no es correcto? Intente usar CSS estándar en lugar de MENOS para esa parte: Chico alto

No, funciona ahora, si miras de cerca mi código, agregué un poco de relleno en píxeles y eso es lo que hizo que no funcionara. Solo que ahora es difícil dividir el 100 por ciento entre 6 bloques, simplemente no funciona. Es mucho mejor con 8 bloques porque se divide con 12.5. - Roland

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.