[css] 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.

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)

This is one way:

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

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.

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

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.

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

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

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';
}

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;

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