CSS columnas fluidas, márgenes fijos; el santo grial de los santos griales

Pruebe esta solución pura de CSS2: violín de demostración

CSS base (fiddle sin los cosméticos):

html, body {
    padding: 0;
    margin: 0;
}
#wrap {
    padding-right: 30px;
    overflow: hidden;
}
.col {
    float: left;
    margin-left: 40px;
    margin-right: -30px;
}
.col:first-child {
    margin-left: 0;
}
.small {
    width: 16.66%;
}
.medium {
    width: 25%;
}
.large {
    width: 41.66%;
}

HTML:

<div id="wrap">
    <div class="col small"></div>
    <div class="col medium"></div>
    <div class="col small"></div>
    <div class="col large"></div>
</div>

Probado en Win7 en IE7, IE8, IE9, Opera 11.50, Safari 5.0.5, FF 6.0, Chrome 13.0.

Actualización:

Ahora, si desea que esto funcione con un número arbitrario de columnas, debe agregar una clase adicional al contenedor especificando el número de columnas:

<div class="cols-12 count-04">
    <div class="col width-02"></div>
    <div class="col width-03"></div>
    <div class="col width-02"></div>
    <div class="col width-05"></div>
</div>

Véase este fiddle actualizado demuestra un número de varios recuentos de columnas.

Posible error:

Teóricamente, en mi humilde opinión, esta solución debería funcionar para cualquier número de columnas para cada ancho mínimo posible de columna en cualquier ancho de ventana del navegador. Pero parece que todos los navegadores no son capaces de manejar: 1. un gran número de columnas de ancho de columna 1, o 2. un pequeño ancho de ventana del navegador.

Tenga en cuenta que todos los navegadores con un ancho mínimo de 1440 píxeles, lo que equivale a 12 veces 120 píxeles (el espacio ocupado por todos los márgenes de 10px), manejar la solución muy bien. Y cuando se utilizan 2 o más columnas de ancho de columna, el requisito para el ancho mínimo del navegador de hecho se reduce a 720 píxeles (6 * 120px). Este último caso suena más realista, pero aún así, no puedo explicar este comportamiento del navegador.

Traté de solucionar el problema mediante la introducción de un adicional última columna clase como lo demuestra este violín , pero no resuelve el problema para pequeños anchos de navegador. Sin embargo, resuelve un pequeño error de redondeo debido a los porcentajes de ancho roto, pero supongo que ese problema podría ignorarse.

Me gustaría escuchar a otros expertos en css en este caso, así que agregué una recompensa.

¿Por qué no usas

.column > .panel {
    padding: 10px 0 10px 10px;
}

.column:first-child > .panel {
    padding-left: 0px;
}

Hará espacios de 10px solo entre cajas y sin usar last-child.

Echa un vistazo a la respuesta de thirtydot en este hilo para un CSS/HTML puro (Diseño fluido con "columnas" igualmente espaciadas sin JavaScript)...

Ancho de fluido con DIVs igualmente espaciados

Http://jsfiddle.net/thirtydot/EDp8R /

La modificación del JSFiddle demuestra que se puede hacer que las "columnas" tengan diferentes anchos fijos y aún tengan márgenes iguales y fluidos.

Http://jsfiddle.net/EDp8R/43 /

Finalmente, otro ejemplo usando porcentajes mientras se mantienen márgenes iguales y fluidos.

Http://jsfiddle.net/EDp8R/45 /

Me doy cuenta de que esto puede no ser una solución exacta, pero te acerca bastante, creo.

En referencia a la Pregunta Original "¿Hay alguna manera, usando CSS puro, de lograr un diseño de columnas de ancho fluido con márgenes de ancho fijos?"

Es notable lo extremadamente difícil que resulta CSS con este tipo de preguntas. La semana pasada he estado trabajando en una ' plantilla base 'para crear mi propio' santo grial', incluyendo borde, margen y rellenos... Parece que CSS falla para este tipo de preguntas. Aunque la pregunta en mente es bastante fácil, se convierte en (casi?) imposible lograr en CSS, especialmente entre navegadores.

La parte divertida es que estas preguntas se resuelven fácilmente usando tablas. No entiendo por qué estamos siendo forzados por la sociedad web a usar div en su lugar para argumentos tan vagos como "semántica" y "visión general fácil", ya que la mayoría de los argumentos son débiles o incluso falsos. Las personas que dicen que las tablas están dando más problemas, claramente no entienden la verdadera dificultad que se encuentra dentro de CSS.

De todos modos, si desea tener una estructura de tabla (como columnas son parte de una tabla) Sugiero usar 'display:table'.

Para lograr la imagen debajo de la pregunta original con CSS puro, se podría usar lo siguiente:

CSS

html,body{
    margin: 0px; 
    padding: 0px; 
    height: 100%; 
    width: 100%;
    overflow: auto;
}
.table{
    background: pink;
    display: table;
    width: 100%;
    height: 100%;
}
.tableRow{
    display: table-row;         
}
.tableCell{
    display: table-cell;
    vertical-align: top;
    height: 100%;  
}
/*
    Ensures the full size of the table-cell has the behaviour of a block-element. 
    This is needed, because 'table-cell' will behave differently in different browsers.
*/
.tableCell>div{
    height: 100%;
}
/*
    Padding has to be used instead of margin in 'border-box' modus.
*/
.tableCell>div>div{
    height: 100%;
    box-sizing:border-box;
    -moz-box-sizing:border-box;
}
/*
    The final content.
*/
.tableCell>div>div>div{
    background: lightblue;
    padding: 5px;
    height: 100%;
    box-sizing:border-box;
    -moz-box-sizing:border-box;
}


#col1{
    width: 16.66%;          
}
#col1>div>div{
    padding-right: 10px;
}
#col2{
    width: 25%;         
}
#col2>div>div{
    padding-right: 10px;
}
#col3{      
    width: 16.66%;
}
#col3>div>div{
    padding-right: 10px;
}
#col4{
    width: 41.66%;
}

HTML

<div class="table">
    <div class="tableRow">
        <div id='col1' class="tableCell">   
            <div><div><div>16.66%</div></div></div>
        </div>
        <div id='col2' class="tableCell">
            <div><div><div>25%</div></div></div>
        </div>
        <div id='col3' class="tableCell">
            <div><div><div>16.66%</div></div></div>
        </div>
        <div id='col4' class="tableCell">
            <div><div><div>41.66%</div></div></div>
        </div>  
    </div>
</div>

Diría que es bastante exagerado usando divs adicionales para solo un margen, pero desafortunadamente CSS no tiene un modelo de 'caja de margen', que en realidad resolvería mil millones de problemas.

Esta cantidad de código anidado podría hacerte pensar ' ¿por qué no usar otras técnicas?"ya que eso puede resultar en menos código. Por un deseo muy específico que sería el caso. Sin embargo, otras técnicas a menudo implican flotación o posicionamiento absoluto. Estas técnicas no pueden lograr lo mismo: los flotadores, por ejemplo, pueden lograr columnas que son iguales en longitud, pero cuando quieres un borde o margen te encontrarás en problemas. Para el posicionamiento absoluto es más bien lo contrario: puede resolver el problema del margen, pero la altura solo puede basarse en uno columna.

En mi opinión CSS no ha cumplido con los requisitos. Si bien es necesario sustituir las tablas por posiciones, después de todos estos años todavía no es posible obtener los mismos resultados. Para lograr' el santo grial de los santos griales ' las estructuras de la mesa no son solo la manera más fácil, también hay la única manera... al menos, por lo que sé después de probar cientos de posibilidades.

La pregunta restante es: ¿por qué usar divs si los estás usando como tablas? Este no me entiendo a mí mismo, pero la gente parece tener sus razones para eso.

Uso la cuadrícula de OOCSS para esto

Https://github.com/stubbornella/oocss

Recientemente puse una demostración en línea en mi propio sitio ya que no hay ejemplos adecuados en línea : (

Http://www.leipeshit.com/awesome_stuff/oocss/core/grid/grids_all.html

Una forma más fácil de obtener el mismo efecto es dejar que el contenido dentro de sus columnas cree sus canales en lugar de aplicar márgenes/relleno a las columnas mismas. Esto se puede hacer con fijo, fluido, elástico, etc. Grid.

Por ejemplo:

/* Gutters */
h1, h2, h3, h4, h5, h6,
p, ul, ol, blockquote,
hr, address, pre, object, fieldset
{
    margin-right: .75rem;
    margin-left: .75rem;
    padding-right: .75rem;
    padding-left: .75rem;
}

Esto también simplifica el dimensionamiento de las columnas, el anidamiento y la aplicación de fondos a las piezas de lego.

¿Por qué no usar el relleno como en su primer ejemplo y luego establecer box-sizing: border-box en todos los elementos?

Recientemente he desarrollado una solución alternativa para esto que permite cualquier combinación de columnas flexibles dentro de una fila con un margen fijo y consistente en todas las columnas, independientemente del ancho del elemento padre.

Esto no usa ningún JavaScript y funciona en IE8+.

En esta solución, el margen se define en dos clases, por lo que es fácil cambiarlo para diseños responsivos. Los anchos de columna también son representativos del espacio que utilizan, por ejemplo, una columna de 2 la fila tiene anchos de 50% y una fila de 4 columnas tiene anchos de 25%.

Puedes ver un ejemplo en http://www.andrewjamestait.co.uk/conflexgrids /

O está disponible en GitHub en https://github.com/andrewjtait/conflexgrids

Si puede vivir con otro div anidado por columna, podría definir el margen deseado para cada una. Para deshacerse del margen en los bordes exteriores izquierdo y derecho, puede definir un margen negativo en el contenedor exterior.

Ej.: Usando PureCSS pure-g es el contenedor exterior, pure-u-* es un nodo de columna (display: inline-block) que contiene el div anidado. spacing es el nombre de esta extensión personalizada del sistema de cuadrícula PureCSS para permitir márgenes de columna.

.pure-g.spacing {
    margin: 0 -10px;
}

.pure-g.spacing [class *= "pure-u"] > div {
    margin: 10px;
}

Debe trabajar en la mayoría de los navegadores. Dime si no lo hace - ya lo estoy usando.

Saludos, Max