title: Symfony printing label on a4 format
body: <p>I am using the wkhtmltopdf bundle to convert my html page to a .pdf file. I want to use this so customers can print the content on a label paper seized 3 x 7. The exact size of a label is 70 x 42,3mm. The problem is, i cant seem to get the sizing right.</p>
  
  <p>I used the css of float right and 33% width to get 3 columns, and now im trying to get 7 rows. I thought dividing it by 14.2% (7 rows) would do the trick. However it will then only print 1 label. When i remove the height it will print all the labels, but more then 7 per page. Anyone help me figure out how to get a 3x7 a4 format for labels?</p>
  
  <pre><code>{% set labels = 1 %}
  
  {% block body %}
      {% for sale in webstore.getSales %}
          {% for orderItem in sale.getOrderItems %}
              {% if labels == 21 %}
  
          &lt;div style="page-break-after: before;" class="newPage"&gt;&lt;/div&gt;
              {% set labels = 1 %}
              &lt;br&gt;
          &lt;/div&gt;
          {%endif%}
          &lt;div class="stickerWidth" id="stickerWidth"  &gt;  
              &lt;div class="text"&gt;
                  &lt;div &gt;{{sale.getWebstoreOrderId}}   : &lt;span style="float:right; margin-right:5px; font-size:20px" &gt; {{sale.getDate.date | date("d/m/Y")}}&lt;/span&gt;  &lt;/div&gt; &lt;br&gt;&lt;br&gt;
                  &lt;div style=" text-align:center;font-size: 24px;"&gt;{{orderItem.getAmount}} x {{orderItem.getItemName}}&lt;/div&gt; &lt;br&gt;
                    &lt;div&gt;
                      {% if webstore.name %}
                          &lt;span style="font-size:20px"&gt;
                          {{webstore.id}}&lt;br&gt;
                          {{webstore.name}}&lt;/span&gt;
                       {% endif %}
  
                  &lt;/div&gt;
              &lt;/div&gt;
  
          &lt;/div&gt;
      {% set labels = labels + 1 %}
      {% endfor %}
  {% endfor %}
  
  {% endblock %}
  
  {% block styleSheets%}
      &lt;link rel="stylesheet" href="{{ base_dir ~ asset('css/main.css') }}"&gt;
      &lt;style&gt;
          .newPage {
               page-break-after: always;
               page-break-inside: avoid;
          }
          .stickerWidth{
              height: 180px;
              width: 33%;
              float: left;
              background-color: green;            
          }
  
          .text{
              background-color: red;
              margin-right: 5px; 
              margin-top: 5px;
              margin-top: 5px;
          }
      &lt;/style&gt;
  {% endblock %}
  </code></pre>
  
  <p>EDIT: added the latest code, used labels to count if i reach 21 then new page</p>
  
  <p><a href="https://i.stack.imgur.com/TCKqE.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/TCKqE.png" alt="enter image description here"></a></p>