Cómo hacer que un div vacío ocupe espacio

Este es mi caso del sistema de cuadrícula 960:

<div class="kundregister_grid_full">
    <div class="kundregister_grid_1">ID</div>
    <div class="kundregister_grid_1">Namn</div>
    <div class="kundregister_grid_1">Anv.Namn</div>
    <div class="kundregister_grid_1">Email</div>
    <div class="kundregister_grid_1">Roll</div>
    <div class="kundregister_grid_1">Aktiv</div>
</div>

Este es mi conjunto de divs, usado como estructura de tabla.

CSS dice lo siguiente:

.kundregister_grid_1 {
    display: inline-block;
    float: left;
    margin: 0; 
    text-align: center;
}
.kundregister_grid_1 {
    width: 140px;
}

No importa el nombre sueco. Quiero que se muestren los divs aunque no tengan valores.

<div class="kundregister_grid_full">
 <div class="kundregister_grid_1">ID</div>
 <div class="kundregister_grid_1"></div>
 <div class="kundregister_grid_1"></div>
 <div class="kundregister_grid_1">Email</div>
 <div class="kundregister_grid_1">Roll</div>
 <div class="kundregister_grid_1">Aktiv</div>
</div>

Así, en este caso no hay 'Namn' y 'Avn.Namn' en las dos columnas. Sin embargo, cuando se ejecuta esto en Chrome, se eliminan y ya no presionan los otros divs en el orden float:left. Entonces, si tengo categorías en los mismos divs anteriores, los valores se colocarían en la categoría incorrecta.

funciona si quita la flotación. http://jsbin.com/izoca/2/edit

con flotadores solo funciona si hay algún contenido, por ejemplo  

Intente agregar  elementos vacíos.

Sin <table>embargo, no entiendo por qué no estás usando un aquí. Harán este tipo de cosas automáticamente.

Ligera actualización de la respuesta de @ no1cobla. Esto oculta el período. Esta solución funciona en IE8 +.

.class:after
{
    content: '.';
    visibility: hidden;
}

Una solución simple para divs flotantes vacíos es agregar:

• ancho (o ancho mínimo)
• altura mínima

de esta manera puede mantener la funcionalidad de flotación y forzarlo a llenar el espacio cuando está vacío.

Utilizo esta técnica en columnas de diseño de página, para mantener cada columna en su posición incluso si las otras columnas están vacías.

Ejemplo:

.left-column
{
   width: 200px;
   min-height: 1px;
   float: left;
}

.right-column
{
    width: 500px;
    min-height: 1px;
    float: left;
}

Simplemente agregue un carácter de espacio de ancho cero dentro de un pseudo elemento

.class:after {
    content: '\200b';
}

Esta es una forma:

.your-selector:empty::after {
    content: ".";
    visibility: hidden;
}

Usted puede:

o Establecer .kundregister_grid_1en:

• width(o width-min) con height(o min-height)
• o padding-top
• o padding-bottom
• o border-top
• o border-bottom

o O use pseudo-elementos : ::beforeo ::aftercon:

• {content: "\200B";}
• o {content: "."; visibility: hidden;}.

o O poner  un elemento vacío dentro, pero esto a veces puede traer efectos inesperados, por ejemplo. en combinación context-decoration: underline;

¿Por qué no simplemente agregar "min-width" a su clase css?

  funciona, pero eso no es correcto, creo que el w min-height: 1px;

Con el uso del bloque en línea, se comportará como un objeto en línea. por lo que no se necesitan flotadores para ponerlos uno al lado del otro en una línea. Y de hecho, como dijo Rito, las carrozas necesitan un "cuerpo", como necesitan dimensiones.

Estoy totalmente de acuerdo con Pekka sobre el uso de tablas. Todos los que crean diseños usando div evitan tablas como si fuera una enfermedad. ¡Pero utilícelos para datos tabulares! Para eso están hechos. Y en tu caso creo que los necesitas :)

PERO si realmente quieres lo que quieres. Hay una forma de hackear CSS. Igual que el truco de flotación.

.kundregister_grid_1:after {  content: ".";  }

Agregue ese y también estará configurado: D (Nota: no funciona en IE, pero se puede arreglar)

Si necesitan flotar, siempre puede establecer la altura mínima en 1px para que no colapsen.

Al crear un conjunto personalizado de etiquetas de diseño, encontré otra respuesta a este problema. Aquí se proporciona el conjunto personalizado de etiquetas y sus clases CSS.

HTML

<layout-table>
   <layout-header> 
       <layout-column> 1 a</layout-column>
       <layout-column>  </layout-column>
       <layout-column> 3 </layout-column>
       <layout-column> 4 </layout-column>
   </layout-header>

   <layout-row> 
       <layout-column> a </layout-column>
       <layout-column> a 1</layout-column>
       <layout-column> a </layout-column>
       <layout-column> a </layout-column>
   </layout-row>

   <layout-footer> 
       <layout-column> 1 </layout-column>
       <layout-column>  </layout-column>
       <layout-column> 3 b</layout-column>
       <layout-column> 4 </layout-column>
   </layout-footer>
</layout-table>

CSS

layout-table
{
    display : table;
    clear : both;
    table-layout : fixed;
    width : 100%;
}

layout-table:unresolved
{
    color : red;
    border: 1px blue solid;
    empty-cells : show;
}

layout-header, layout-footer, layout-row 
{
    display : table-row;
    clear : both;   
    empty-cells : show;
    width : 100%;
}

layout-column 
{ 
    display : table-column;
    float : left;
    width : 25%;
    min-width : 25%;
    empty-cells : show;
    box-sizing: border-box;
    /* border: 1px solid white; */
    padding : 1px 1px 1px 1px;
}

layout-row:nth-child(even)
{ 
    background-color : lightblue;
}

layout-row:hover 
{ background-color: #f5f5f5 }

La clave aquí es el tamaño de la caja y el relleno.