How to make an empty div take space?

This is my 960 grid system case:

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

This is my set of divs, used as a table structure.

CSS says following:

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

Don't mind the Swedish naming. I want the divs to show even though they have no values.

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

Like so, in this case there's no 'Namn' and 'Avn.Namn' in the two columns. However when running this in chrome, they are removed, and do no longer push the other divs in the order float:left. So if I have categories in same divs above, then the values would be placed under wrong category.

It works if you remove floating. http://jsbin.com/izoca/2/edit

With floats it only works if there's some content e.g.  

Try adding   to the empty items.

I don't understand why you're not using a <table> here, though? They will do this kind of stuff automatically.

Slight update to @no1cobla answer. This hides the period. This solution works in IE8+.

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

Simply add a zero width space character inside a pseudo element

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

A simple solution for empty floated divs is to add:

• width (or min-width)
• min-height

this way you can keep the float functionality and force it to fill space when empty.

I use this technique in page layout columns, to keep every column in its position even if the other columns are empty.

Example:

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

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

You can:

o set .kundregister_grid_1 to:

• width(or width-min) with height (or min-height)
• or padding-top
• or padding-bottom
• or border-top
• or border-bottom

o or use pseudo-elements: ::before or ::after with:

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

o or put   inside empty element, but this sometimes can bring unexpected effects eg. in combination with text-decoration: underline;

This is one way:

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

Why not just add "min-width" to your css-class?

  works but that is not right way I think the w min-height: 1px;

With using the inline-block it will behave as an inline object. so no floats needed to get them next to each other on one line. And indeed as Rito said, floats need a "body", like they need dimensions.

I totally agree with Pekka about using tables. Everybody that build layouts using div's avoid tables like it's a disease. But use them for tabular data! That's what they're ment for. And in your case i think you need them.

BUT if you really really want what you want. There is a CSS hack way. Same as the float hack.

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

Add that one and you're also set. (Note: does not work in IE, but that is fixable).

If they need to be floated, you could always just set the min-height to 1px so they don't collapse.

In building a custom set of layout tags, I found another answer to this problem. Provided here is the custom set of tags and their CSS classes.

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 }

The key here is the Box-Sizing and Padding.

it works for me by set div class row and style=display:table-row

Try adding display: list-item to the class