change width depending on total amount of children div

Question

I have 4 div s with the class button . Sometimes a page may have 5 div s with that class name, so I need to change their width in order to make them fit into the page.

This is my css:

<style>
.button{
   width:25%;
}
@media only screen and (max-device-width: 480px)  { 
  .button{
     width:100%;
  }
}
</style>

This is my html:

<div id="center">
<div class="button" style=" background: blue; float:left;">test</div>
<div class="button" style=" background: red; float:left;">test</div>
<div class="button" style=" background: purple; float:left;">test</div>
<div class="button" style=" background:orange; float:left;">test</div>
</div>

This was my attempt in javascript

<script type="text/javascript">
$(document).ready(function() { 
   if($("#center div").length == 4);
       button.style.width = '25%';
   }
   else{
       button.style.width = '20%';
   }
});
</script>

However this script does not work.

Answer 1

As a JavaScript solution, you could get the number of .button children and set their width as 100% / number-of-chilren .

 var divs = $('#center').children('.button'); divs.width(100 / divs.length + '%'); 

 .button { float:left; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="center"> <div class="button" style="background: blue;">test</div> <div class="button" style="background: red;">test</div> <div class="button" style="background: purple;">test</div> <div class="button" style="background:orange;">test</div> </div> 

---

However if Flexible box layout is an option, you could achieve the same result by adding display: flex to the container and flex: 1 to the children.

 #center { display: flex; } .button { flex: 1 } 

 <div id="center"> <div class="button" style=" background: blue;">test</div> <div class="button" style=" background: red;">test</div> <div class="button" style=" background: purple;">test</div> <div class="button" style=" background:orange;">test</div> </div> 

Vendor prefixes omitted due to brevity.

Answer 2

Remove all the floats from .button elements

<div id="center">
<div class="button" style=" background: blue;">test</div>
<div class="button" style=" background: red;">test</div>
<div class="button" style=" background: purple;">test</div>
<div class="button" style=" background: orange;">test</div>
<!-- div class="button" style=" background: green;">test</div -->
</div>

and use display: table/table-cell to obtain an equal width of inner elements

#center { display: table; width: 100%; }
.button { display: table-cell; }

@media only screen and (max-width: 480px)  { 
   #center, .button {
      display: block;
   }
}

table-* values are widely supported (even on IE8)

Example on codepen: http://codepen.io/anon/pen/MYxMvg
(try to remove the comment from last div)

---

If you need instead to specifically set a width (or also a different property than the width) you can play with both with float and : nth-last-child pseudoclass eg

.button { float: left; }

/* style assigned from the fourth-last element onwards */
.button:nth-last-child(n + 4),
.button:nth-last-child(n + 4) ~ div {
   color: white;
   width: 25%;  
}

/* style assigned from the fifth-last element onwards 
   (override previous rules) */
.button:nth-last-child(n + 5),
.button:nth-last-child(n + 5) ~ div {
   color: yellow;
   width: 20%;  
}

/* style for <= 480px (with higher specificity) */
@media only screen and (max-width: 480px)  { 
   #center .button {
      float: none;
      width: 100%;
   }
}

Example on codepen: http://codepen.io/anon/pen/xbBoPR

Answer 3

I can't see an obvious way to do this with plain CSS without a hack, but I've written you a jQuery method that should do the trick.

See the JSFiddle here for demo + code.

function setDynamicWidths(){
    var num = $( "div.button" ).length;        // Get number of divs
   var width = 100 / num;                     // Calculate width as %   
    $("div.button").css('width',width+'%');   // Set width of divs   
}

So you can just call that method or paste it's content's into somewhere like the $(document).ready(function(){ /* code here */ }); block.

Don't forget to include jQuery library too.

Hope that helps :)