How to make an empty div take space

Answer 1

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)

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

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

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

Answer 4

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

Answer 5

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

Answer 6

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.