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.

Solution 1:

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

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

Solution 2:

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.

Solution 3:

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

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

Solution 4:

Simply add a zero width space character inside a pseudo element

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