user10 user10 - 6 months ago 10
HTML Question

div width auto adjust

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

container have 4 blocks..Each

div
contain
width:25%
.. so fulfill the container...

If i remove any one
div
container have empty space.. but I want to again fulfill the container..
Its is possible?

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

Answer

You can use display: table; & display: table-cell for this. Im pretty sure this is what you mean.

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

Demo Here 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>