How to show an empty DIV with dynamic width?

Question

how can I make an empty DIV or SPAN to be shown and grow or shrink according to the content of the others?

This is what I have until now:

.text{
 float:left;
 display:inline-block;
}
.borda{
 display:inline-block;
 background-image: url('borda.png');
 background-repeat:repeat-x;
 background-position:center bottom;
 float:left;
 margin:30px 0 0 5px;
 empty-cells: show;"
}
.numbers{
 float:right;
 display:inline-block;
}

<div>
<span class="text">Text Text Text</span><span class"borda"></span><span class="numbers">Numbers</span>
</div>

This may be help you http://stackoverflow.com/questions/4171286/how-to-make-a-div-with-no-content-have-a-width — Shehary, Aug 14 '15 at 16:44
@RokoC.Buljan about empty-cells take a look at this http://www.w3schools.com/cssref/pr_tab_empty-cells.asp — Heathz, Aug 14 '15 at 17:45
@stratovarius "borda" will grow or shrink depending on the size of "text", "numbers" will always have seven chars (by the way... great band!) — Heathz, Aug 14 '15 at 17:45
@Heathz what's w3schools? P.S: I was referring to your typo `"` — Roko C. Buljan, Aug 14 '15 at 19:53

score 2 · Accepted Answer · answered Aug 14 '15 at 16:52

You can use the CSS3 flexbox specifications. Simply allow the .borda container to grow, i.e. flex-grow: 1. I have changed the background colours to show contrast. There is some error with your markup, including the missing = for the class assignment for .borda.

div {
  display: flex;
}
.text {
  background-color: #eee;
}
.borda {
  background-color: #333;
  flex-grow: 1;
}
.numbers {
  background-color: #eee;
}

<div>
  <span class="text">Text Text Text</span><span class="borda"></span><span class="numbers">Numbers</span>
</div>

How to show an empty DIV with dynamic width?

1 Answers1