How to make an empty div take space

Answer 1

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

Answer 2

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.

Answer 3

This is one way:

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

Answer 4

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

Answer 5

Simply add a zero width space character inside a pseudo element

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

Answer 6

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;