CODEWITHSUNDEEP
javascriptcssresponsive-designwidth
Elvira
Elvira

Reputation: 1440

change width depending on total amount of children div

I have 4 divs with the class button. Sometimes a page may have 5 divs 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.

Upvotes: 0

Views: 1626

Answers (2)

Fabrizio Calderan
Fabrizio Calderan

Reputation: 123397

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 e.g

.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

Upvotes: 0

Hashem Qolami
Hashem Qolami

Reputation: 99544

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.

Upvotes: 3

Related Questions