How does div width automatically adjust inside images / content?

Question

Demo script : http://jsfiddle.net/UI_Designer/2gqy9s9k/1/

The container has 4 blocks. Each div contains width:25% .. so do the container ...

If I delete any container div , you will have empty space .. but I want to execute the container again. Is it possible?

 .container{ width:100%; border:1px solid #333 } .badge-block{ float:left; width: 25%; } .badge-block img{ width:80%; } 

Answer 1

You can use display: table; and display: table-cell for this. I am sure this is what you mean.

Table cells occupy the left space. So just use it like this, take one of the images and you will see how it works.

Here again too

 .container { width: 100%; border: 1px solid #333; display: table; } .badge-block { display: table-cell; } .badge-block img { width: 80%; } 

 <div class="container"> <div class="badge-block"> <a href="javascript::" data-toggle="tooltip" title="General Pack Rs.50" class="badge-icon"> <img src="http://www.globalniche.net/wp-content/uploads/2013/07/badge1.png" class="img-responsive"> </a> </div> <div class="badge-block"> <a href="javascript::" data-toggle="tooltip" title="General Pack Rs.50" class="badge-icon"> <img src="http://www.globalniche.net/wp-content/uploads/2013/07/badge1.png" class="img-responsive"> </a> </div> <div class="badge-block"> <a href="javascript::" data-toggle="tooltip" title="General Pack Rs.50" class="badge-icon"> <img src="http://www.globalniche.net/wp-content/uploads/2013/07/badge1.png" class="img-responsive"> </a> </div> <div class="badge-block"> <a href="javascript::" data-toggle="tooltip" title="General Pack Rs.50" class="badge-icon"> <img src="http://www.globalniche.net/wp-content/uploads/2013/07/badge1.png" class="img-responsive"> </a> </div> </div> 

Answer 2

display: table-cell is your friend here.

 .container{ width:100%; border:1px solid #333; display: table; } .badge-block{ display: table-cell; } .badge-block img{ width:80%; } 

 <div class="container"> <div class="badge-block"> <a href="javascript::" data-toggle="tooltip" title="General Pack Rs.50" class="badge-icon"><img src="http://www.globalniche.net/wp-content/uploads/2013/07/badge1.png" class="img-responsive"> </a> </div> <div class="badge-block"> <a href="javascript::" data-toggle="tooltip" title="General Pack Rs.50" class="badge-icon"><img src="http://www.globalniche.net/wp-content/uploads/2013/07/badge1.png" class="img-responsive"> </a> </div> <div class="badge-block"> <a href="javascript::" data-toggle="tooltip" title="General Pack Rs.50" class="badge-icon"><img src="http://www.globalniche.net/wp-content/uploads/2013/07/badge1.png" class="img-responsive"> </a> </div> <div class="badge-block"> <a href="javascript::" data-toggle="tooltip" title="General Pack Rs.50" class="badge-icon"><img src="http://www.globalniche.net/wp-content/uploads/2013/07/badge1.png" class="img-responsive"> </a> </div> </div> <div class="container"> <div class="badge-block"> <a href="javascript::" data-toggle="tooltip" title="General Pack Rs.50" class="badge-icon"><img src="http://www.globalniche.net/wp-content/uploads/2013/07/badge1.png" class="img-responsive"> </a> </div> <div class="badge-block"> <a href="javascript::" data-toggle="tooltip" title="General Pack Rs.50" class="badge-icon"><img src="http://www.globalniche.net/wp-content/uploads/2013/07/badge1.png" class="img-responsive"> </a> </div> <div class="badge-block"> <a href="javascript::" data-toggle="tooltip" title="General Pack Rs.50" class="badge-icon"><img src="http://www.globalniche.net/wp-content/uploads/2013/07/badge1.png" class="img-responsive"> </a> </div> </div> 

Or, if you only need to support modern browsers, you can use flexbox ...

 .container{ width:100%; border:1px solid #333; display: -webkit-flex; display: -ms-flexbox; display: flex; } .badge-block img{ width:80%; } 

 <div class="container"> <div class="badge-block"> <a href="javascript::" data-toggle="tooltip" title="General Pack Rs.50" class="badge-icon"><img src="http://www.globalniche.net/wp-content/uploads/2013/07/badge1.png" class="img-responsive"> </a> </div> <div class="badge-block"> <a href="javascript::" data-toggle="tooltip" title="General Pack Rs.50" class="badge-icon"><img src="http://www.globalniche.net/wp-content/uploads/2013/07/badge1.png" class="img-responsive"> </a> </div> <div class="badge-block"> <a href="javascript::" data-toggle="tooltip" title="General Pack Rs.50" class="badge-icon"><img src="http://www.globalniche.net/wp-content/uploads/2013/07/badge1.png" class="img-responsive"> </a> </div> <div class="badge-block"> <a href="javascript::" data-toggle="tooltip" title="General Pack Rs.50" class="badge-icon"><img src="http://www.globalniche.net/wp-content/uploads/2013/07/badge1.png" class="img-responsive"> </a> </div> </div> <div class="container"> <div class="badge-block"> <a href="javascript::" data-toggle="tooltip" title="General Pack Rs.50" class="badge-icon"><img src="http://www.globalniche.net/wp-content/uploads/2013/07/badge1.png" class="img-responsive"> </a> </div> <div class="badge-block"> <a href="javascript::" data-toggle="tooltip" title="General Pack Rs.50" class="badge-icon"><img src="http://www.globalniche.net/wp-content/uploads/2013/07/badge1.png" class="img-responsive"> </a> </div> <div class="badge-block"> <a href="javascript::" data-toggle="tooltip" title="General Pack Rs.50" class="badge-icon"><img src="http://www.globalniche.net/wp-content/uploads/2013/07/badge1.png" class="img-responsive"> </a> </div> </div> 

Answer 3

You can use display: table in your container with table-layout: fixed to fix the same width in your columns.
In your div (s) you can apply display: table-cell and remove the float.

Same:

 .container { display: table; table-layout: fixed; // Fix all columns to same width width:100%; border:1px solid #333 } .badge-block { display: table-cell; width: 100%; } 

http://jsfiddle.net/2gqy9s9k/4/

Answer 4

The classic way is display: table-cell , but Flexbox is definitely the future.

With Flexbox, you can achieve this easily, and all major browsers currently support it in its third version, one.

Run the code snippet and scroll down.

 .container{ display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; } .badge-block{ margin: 0 auto; } .img-responsive{ width: 100%; } 

 <div class="container"><div class="badge-block"><a href="javascript::" data-toggle="tooltip" title="General Pack Rs.50" class="badge-icon"><img src="http://www.globalniche.net/wp-content/uploads/2013/07/badge1.png" class="img-responsive"> </a></div> <div class="badge-block"><a href="javascript::" data-toggle="tooltip" title="General Pack Rs.50" class="badge-icon"><img src="http://www.globalniche.net/wp-content/uploads/2013/07/badge1.png" class="img-responsive"> </a></div> <div class="badge-block"><a href="javascript::" data-toggle="tooltip" title="General Pack Rs.50" class="badge-icon"><img src="http://www.globalniche.net/wp-content/uploads/2013/07/badge1.png" class="img-responsive"> </a></div> <div class="badge-block"><a href="javascript::" data-toggle="tooltip" title="General Pack Rs.50" class="badge-icon"><img src="http://www.globalniche.net/wp-content/uploads/2013/07/badge1.png" class="img-responsive"> </a></div> <div class="badge-block"><a href="javascript::" data-toggle="tooltip" title="General Pack Rs.50" class="badge-icon"><img src="http://www.globalniche.net/wp-content/uploads/2013/07/badge1.png" class="img-responsive"> </a></div></div><div class="container"><div class="badge-block"><a href="javascript::" data-toggle="tooltip" title="General Pack Rs.50" class="badge-icon"><img src="http://www.globalniche.net/wp-content/uploads/2013/07/badge1.png" class="img-responsive"> </a></div><div class="badge-block"><a href="javascript::" data-toggle="tooltip" title="General Pack Rs.50" class="badge-icon"><img src="http://www.globalniche.net/wp-content/uploads/2013/07/badge1.png" class="img-responsive"> </a></div><div class="badge-block"><a href="javascript::" data-toggle="tooltip" title="General Pack Rs.50" class="badge-icon"><img src="http://www.globalniche.net/wp-content/uploads/2013/07/badge1.png" class="img-responsive"> </a></div><div class="badge-block"><a href="javascript::" data-toggle="tooltip" title="General Pack Rs.50" class="badge-icon"><img src="http://www.globalniche.net/wp-content/uploads/2013/07/badge1.png" class="img-responsive"> </a></div></div><div class="container"><div class="badge-block"><a href="javascript::" data-toggle="tooltip" title="General Pack Rs.50" class="badge-icon"><img src="http://www.globalniche.net/wp-content/uploads/2013/07/badge1.png" class="img-responsive"> </a></div><div class="badge-block"><a href="javascript::" data-toggle="tooltip" title="General Pack Rs.50" class="badge-icon"><img src="http://www.globalniche.net/wp-content/uploads/2013/07/badge1.png" class="img-responsive"> </a></div><div class="badge-block"><a href="javascript::" data-toggle="tooltip" title="General Pack Rs.50" class="badge-icon"><img src="http://www.globalniche.net/wp-content/uploads/2013/07/badge1.png" class="img-responsive"> </a></div></div><div class="container"><div class="badge-block"><a href="javascript::" data-toggle="tooltip" title="General Pack Rs.50" class="badge-icon"><img src="http://www.globalniche.net/wp-content/uploads/2013/07/badge1.png" class="img-responsive"> </a></div><div class="badge-block"><a href="javascript::" data-toggle="tooltip" title="General Pack Rs.50" class="badge-icon"><img src="http://www.globalniche.net/wp-content/uploads/2013/07/badge1.png" class="img-responsive"> </a></div></div><div class="container"><div class="badge-block"><a href="javascript::" data-toggle="tooltip" title="General Pack Rs.50" class="badge-icon"><img src="http://www.globalniche.net/wp-content/uploads/2013/07/badge1.png" class="img-responsive"> </a></div></div> 

Don't miss out on the Complete Flexbox Guide and take a look at Flexy Boxes , an awesome tool for visualizing code with a Flex prefix.