How to Limit The Size of Div in Twig

Question

What i Need :

    * All div should be of Equal Height and width.

problem im facing

 * is some data some div are bigger then another div.

Here is Snapshot Url:

 http://postimg.org/image/bxelzcb09/.

Api:

 {
 data: [
 {
id: 42166,
Company_Website: "http://www.amphenol-highspeed.com/",
company_name: "Amphenol High Speed Interconnect",
city_name: "New York",
country_name: "USA",
comp_img: null,
Product_Name: null
},
{
id: 42167,
Company_Website: "http://www.clearfieldconnection.com/",
company_name: "Clearfield, Inc.",
 city_name: "Plymouth",
country_name: "USA",
comp_img: null,
Product_Name: null
},
}

code of twig :

 {% for item in data.about.data%}
 {%if  ((loop.index-1)%2)=='0' %}
 <div class="row half">
 {% endif %}        

    <div class="6u">
            <div class="box panel exhibitor">
                    <div class="row flush nbdr no-collapse">
                    <div class="10u name">
                    <h3>{{item.company_name }}</h3>
                    <p class="cnt">{{item.city_name }}
           {% if item.Company_Website is defined and item.Company_Website is not empty%}
        <a href="{{ item.Company_Website}}" target="_blank" rel="nofollow"><i class="icon icon-external-link blue bld"></i></a></p>
                     {% endif %}
        </div>
        <div class="2u tar">
            {% if item.comp_img is not empty %}
             <img width="50" alt="" class="image round lazy"   src="{{item.comp_img}}"  }}>
          {% endif %}
           <br class="clear">
          </div>
          <p class="prod">
            {% set foo = item.Product_Name|split(',') %}
            {% for i in  foo|slice(0, 5) %}
            {{ i }} {% if loop.index > 1 %}
                      ,{{ i }}
                    {% endif %}
            {% endfor %}
            </p>
                    </div>
                    <div class="row flush nbdr pdt">
                    <div class="12u connect">
                    <!--<p class="mr"><a href="#"><i class="icon icon-envelope"></i> Connect</a> <span>Booth # 50</span></p>-->
                    </div>
                    </div>
                    </div>
                    </div>






   {%if ((loop.index)%2) == '0' %}
 </div>
 {% elseif  (loop.last) %2 !='0'%}
 </div>
 {% endif %}
  {% endfor %}

  {% if data.about.data|length < '30' and request.ajax =='0' %}

    {% elseif data.about.data|length < '30' %}


        <div  class="12u" id="12">
     </div>
  {% endif %}

• i just want size of each div should be equivalent of each .
• cases a.) consider 4 div as shown in image
  • if first div is enrich with data and second infront of enrich div is null with no data.
  • if first div is enrich with null data and other with big amount of data .
• please tell how to resolve this issue , problem is in css or i could solve this issue through coding.
• i need all div with or without enrichment of data should be of same size.

• i tried to remove spaces i follow link:http://twig.sensiolabs.org/doc/tags/spaceless.html.

  any valuable idea are most welcome ?

Answer 1

Maybe you should use CSS as said by DarkBee, or you could use the JS equalizer system of Foundation working fine.

http://foundation.zurb.com/docs/components/equalizer.html