<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="width100_p pad" id="plan_1"> <div class="width40_p green text-center"> <h1>Width 40%</h1> </div> <div class="width60_p "> <div class="red text-center"> <h1>width 33%</h1> </div> <div class="red text-center"> <h1>width 33%</h1> </div> <div class="red text-center"> <h1>width 33%</h1> </div> </div> </div> <div class="width100_p pad" id="plan_1"> <div class="width40_p green text-center"> <h1>Width 40%</h1> </div> <div class="width60_p"> <div class="red text-center"> <h1>width 33%</h1> </div> <div class="red text-center"> <h1>width 33%</h1> </div> <div class="red text-center"> <h1>width 33%</h1> </div> <div class="red text-center"> <h1>width 33%</h1> </div> </div> </div> <div class="width100_p pad" id="plan_2"> <div class="width40_p green text-center"> <h1>width 40%</h1> </div> <div class="width60_p"> <div class="red text-center"> <h1>width 33%</h1> </div> <div class="red text-center"> <h1>width 33%</h1> </div> <div class="red text-center"> <h1>width 33%</h1> </div> </div> </div> <div class="width100_p pad" id="plan_3"> <div class="width40_p green text-center"> <h1>width 40%</h1> </div> <div class="width60_p"> <div class="red text-center"> <h1>width 50%</h1> </div> <div class="red text-center"> <h1>width 50%</h1> </div> </div> </div> <div class="width100_p pad" id="plan_3"> <div class="width40_p green text-center"> <h1>width 40%</h1> </div> <div class="width60_p"> <div class="red text-center"> <h1>width 60%</h1> </div> </div> </div>

.pad { padding: 10px 0px; } .width100_p { width: 100%; float: left; } .width40_p { width: 39%; float: left; } .width33_p { width: 32%; float: left; } .width50_p { width: 49%; float: left; } .width60_p { width: 58%; float: left; } .width25_p { width: 25%; float: left; } .blue { background-color: blue; } .red { background-color: red; border: 2px solid #000000; } .green { background-color: green; border: 2px solid #000000; }

$(document).ready(function() { $(".width60_p").each(function() { var a = $(this).children(".red").length; if (a == 3) { $(this).children(".red").addClass('width33_p'); } else if (a == 2) { $(this).children(".red").addClass('width50_p'); } else if (a == 1) { $(this).children(".red").addClass('width100_p'); } else { $(this).children(".red").addClass('width33_p'); } }); });