CODEWITHSUNDEEP
csshtml
Oldek
Oldek

Reputation: 2779

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.

Upvotes: 135

Views: 296238

Answers (14)

J&#246;cker
J&#246;cker

Reputation: 6788

Try adding display: list-item to the class

Upvotes: -1

E Net Arch
E Net Arch

Reputation: 458

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.

Upvotes: -1

no1cobla
no1cobla

Reputation: 94

With using the inline-block it will behave as an inline object. so no floats needed to get them next to each other 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 disease. But use them for tabular 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. (Note: does not work in IE, but that is fixable).

Upvotes: 0

vothaison
vothaison

Reputation: 1694

This is one way:

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

Upvotes: 3

Engineeroholic
Engineeroholic

Reputation: 617

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

Upvotes: 29

Blowsie
Blowsie

Reputation: 40575

Simply add a zero width space character inside a pseudo element

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

Upvotes: 41

Jonathan
Jonathan

Reputation: 19149

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

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

Upvotes: 32

Rito
Rito

Reputation: 5213

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

With floats it only works if there's some content e.g. &nbsp;

Upvotes: 87

simhumileco
simhumileco

Reputation: 34643

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 &nbsp; inside empty element, but this sometimes can bring unexpected effects eg. in combination with text-decoration: underline;

Upvotes: 4

Mr.Buntha Khin
Mr.Buntha Khin

Reputation: 85

it works for me by set div class row and style=display:table-row

Upvotes: 0

S M Mahmodul Hassan
S M Mahmodul Hassan

Reputation: 31

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

Upvotes: 2

mmmeff
mmmeff

Reputation: 1033

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

Upvotes: 1

MrTombola
MrTombola

Reputation: 37

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

Upvotes: 2

Pekka
Pekka

Reputation: 449783

Try adding &nbsp; 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.

Upvotes: 67

Related Questions