How to make an empty div

Question

This is my 960 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 table structure.

CSS says the following:

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

Not against the Swedish name. I want divs to be displayed even if 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> 

Thus, in this case there are no "Namn" and "Avn.Namn" in two columns. However, when doing this in chrome, they are deleted and no longer push other divs in float:left order. Therefore, if I have categories in the same div above, then the values ​​will be placed in the wrong category.

Answer 1

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

it only works with floats if there is some content, for example.  

Answer 2

Try adding   to empty elements.

I don’t understand why you are not using <table> ? They will do such things automatically.

Answer 3

A small update for @ no1cobla's answer. This hides the period. This solution works in IE8 +.

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

Answer 4

A simple solution for empty floating divs is to add:

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

this way you can preserve the functionality of the float and make it fill the gap when empty.

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

Example:

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

Answer 5

Just add a space character of zero width inside the pseudo-element

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

Answer 6

This is one way:

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

Answer 7

Using the inline block, it will behave like an inline object. so there were no floats to get them next to each other on the same line. And indeed, as Rito said, you need to swim the "body", as if they needed size.

I totally agree with Pekka about using tables. Everyone who builds layouts using divs avoids tables like this. But use them for tabular data! This is what they are for. And in your case, I think you need them :)

BUT if you really want what you want. There is a way to hack css. Same as hacked float.

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

Add this and you will also install: D (Note: does not work in IE, but this fix)

Answer 8

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

Answer 9

If they need to swim, you can always set a minimum height of 1px so that they don't crash.

Answer 10

works, but this is the wrong way I think w min-height: 1px;

Answer 11

When creating a custom set of layout tags, I found another answer to this problem. Here's a 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 window size and padding.

Answer 12

You can:

Set .kundregister_grid_1 :

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

Or use the pseudo-elements: ::before or ::after with:

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

Or put   inside an empty element, but sometimes it can lead to unexpected consequences, for example. in combination with text-decoration: underline;