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 stackoverflow.com/questions/4171286/… — Shehary
– Shehary, Commented Aug 14, 2015 at 16:44
@RokoC.Buljan about empty-cells take a look at this w3schools.com/cssref/pr_tab_empty-cells.asp — Heathz
– Heathz, Commented Aug 14, 2015 at 17:45

Terry · Accepted Answer · 2015-08-14 16:52:30Z

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>

Collectives™ on Stack Overflow

How to show an empty DIV with dynamic width?

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related