How to make an empty div take space

Question

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}

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

Thank you /Marcus

Answer 1

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.

Answer 2

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

with floats it only works if theres some content e.g.  

Answer 3

With using the inline-block it will behave as an inline object. so no floats needed to get them next to eachother 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 desease. But use them for tablular 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 :D (Note: does not work in IE, but that is fixable)