How to make an empty div take space

Question

This is my 960 grid system case    lt div class  kundregister grid full  gt       lt div class  kundregister grid 1  gt ID lt  div gt       lt div class  kundregister grid 1  gt Namn lt  div gt       lt div class  kundregister grid 1  gt Anv Namn lt  div gt       lt div class  kundregister grid 1  gt Email lt  div gt       lt div class  kundregister grid 1  gt Roll lt  div gt       lt div class  kundregister grid 1  gt Aktiv lt  div gt   lt  div gt    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    lt div class  kundregister grid full  gt    lt div class  kundregister grid 1  gt ID lt  div gt    lt div class  kundregister grid 1  gt  lt  div gt    lt div class  kundregister grid 1  gt  lt  div gt    lt div class  kundregister grid 1  gt Email lt  div gt    lt div class  kundregister grid 1  gt Roll lt  div gt    lt div class  kundregister grid 1  gt Aktiv lt  div gt   lt  div gt    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

User · Answer

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

User · Answer

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

User · Answer

Slight update to  no1cobla answer  This hides the period  This solution works in IE8     class after       content           visibility  hidden

User · Answer

Simply add a zero width space character inside a pseudo element       class after       content    200b

User · Answer

This is one way    your-selector empty  after       content           visibility  hidden

User · Answer

Try adding  amp nbsp  to the empty items   I don t understand why you re not using a  lt table gt  here  though  They will do this kind of stuff automatically

User · Answer

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

User · Answer

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

User · Answer

it works if you remove floating  http   jsbin com izoca 2 edit  with floats it only works if theres some content e g   amp nbsp

User · Answer

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   lt layout-table gt      lt layout-header gt           lt layout-column gt  1 a lt  layout-column gt          lt layout-column gt    lt  layout-column gt          lt layout-column gt  3  lt  layout-column gt          lt layout-column gt  4  lt  layout-column gt      lt  layout-header gt       lt layout-row gt           lt layout-column gt  a  lt  layout-column gt          lt layout-column gt  a 1 lt  layout-column gt          lt layout-column gt  a  lt  layout-column gt          lt layout-column gt  a  lt  layout-column gt      lt  layout-row gt       lt layout-footer gt           lt layout-column gt  1  lt  layout-column gt          lt layout-column gt    lt  layout-column gt          lt layout-column gt  3 b lt  layout-column gt          lt layout-column gt  4  lt  layout-column gt      lt  layout-footer gt   lt  layout-table gt    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

User · Answer

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

User · Answer

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   quot  200B quot    or  content   quot   quot   visibility  hidden     o Or put  amp nbsp  inside empty element  but this sometimes can bring unexpected effects eg  in combination with text-decoration  underline

[css] How to make an empty div take space

Examples related to css

Examples related to html