Como fazer um div vazio ocupar espaço

Este é o meu caso de sistema de grade 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 é meu conjunto de divs, usado como estrutura de tabela.

CSS diz o seguinte:

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

Não se importe com o nome sueco. Quero que os divs sejam exibidos, embora não tenham 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>

Assim, neste caso, não há 'Namn' e 'Avn.Namn' nas duas colunas. No entanto, ao executar isso no cromo, eles são removidos e não empurram mais os outros divs no pedido float:left. Portanto, se eu tiver categorias nos mesmos divs acima, os valores serão colocados na categoria errada.

funciona se você remover o flutuante. http://jsbin.com/izoca/2/edit

com flutuadores só funciona se houver algum conteúdo, por exemplo  

Tente adicionar  aos itens vazios.

Não entendo por que você não está usando um <table>aqui? Eles farão esse tipo de coisa automaticamente.

Ligeira atualização para a resposta @ no1cobla. Isso esconde o período. Esta solução funciona no IE8 +.

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

Uma solução simples para divs flutuantes vazios é adicionar:

• largura (ou largura mínima)
• altura mínima

desta forma, você pode manter a funcionalidade de flutuação e forçá-la a preencher o espaço quando vazio.

Eu uso essa técnica em colunas de layout de página, para manter cada coluna em sua posição, mesmo se as outras colunas estiverem vazias.

Exemplo:

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

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

Basta adicionar um caractere de espaço de largura zero dentro de um pseudoelemento

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

Esta é uma maneira:

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

Você pode:

o Definir .kundregister_grid_1como:

• width(ou width-min) com height(ou min-height)
• ou padding-top
• ou padding-bottom
• ou border-top
• ou border-bottom

o Ou use pseudo-elementos : ::beforeou ::aftercom:

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

o Ou coloque  dentro de um elemento vazio, mas isso às vezes pode trazer efeitos inesperados, por exemplo. em combinação comtext-decoration: underline;

Por que não apenas adicionar "min-width" à sua classe css?

  funciona mas não está certo acho que w min-height: 1px;

Com o uso do bloco embutido, ele se comportará como um objeto embutido. portanto, nenhum flutuador precisa colocá-los um ao lado do outro em uma linha. E, de fato, como disse Rito, os carros alegóricos precisam de um "corpo", assim como precisam de dimensões.

Eu concordo totalmente com Pekka sobre o uso de tabelas. Todo mundo que constrói layouts usando div evita tabelas como se fosse uma doença. Mas use-os para dados tabulares! É para isso que eles servem. E no seu caso, acho que você precisa deles :)

MAS se você realmente quer o que quer. Existe uma maneira de hack css. O mesmo que o hack do float.

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

Adicione esse e você também está definido: D (Observação: não funciona no IE, mas pode ser corrigido)

Se eles precisarem ser flutuados, você sempre pode definir a altura mínima para 1px para que não colapsem.

Ao construir um conjunto personalizado de tags de layout, encontrei outra resposta para esse problema. É fornecido aqui o conjunto personalizado de tags e suas classes 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 }

A chave aqui é o tamanho da caixa e preenchimento.