title: Full page 3 column layout in DomPDF
body: <p>I'm using dompdf to generate pdf like this:</p>
  
  <pre><code>public function generatePdf($customerId){
      // instantiate and use the dompdf class
      $dompdf = new Dompdf();
      $options = new Options();
      $options-&gt;setIsRemoteEnabled(true);
  
      $dompdf-&gt;setOptions($options);
      $dompdf-&gt;loadHtml($this-&gt;renderHtml());
  
      // (Optional) Setup the paper size and orientation
      $dompdf-&gt;setPaper('A4', 'potrait');
  
      // Render the HTML as PDF
      $dompdf-&gt;render();
      // Output the generated PDF to Browser
      $dompdf-&gt;stream();
  }
  </code></pre>
  
  <p>the <code>$this-&gt;renderHtml()</code> will return string containing html text like this:</p>
  
  <pre><code>       &lt;style&gt;
          .first-page .bottom{
            display:inline;
            width:100%;
          }
          .first-page .bottom .section{
            display: block;
            width:25%;
            height: 30px;
          }
          .first-page .bottom .left.section{
          }
          .first-page .bottom .right.section{
            width:37%;
            margin-right:0;
          }
        &lt;/style&gt;
        &lt;div class = "first-page"&gt;
          &lt;div class = "bottom"&gt;
             &lt;div class="left section"&gt;
                &lt;p class="title"&gt;How to activate Card&lt;/p&gt;
                &lt;p class="main"&gt;
                  &lt;ol&gt;
                     &lt;li&gt;Open Purse Pay&lt;/li&gt;
                     &lt;li&gt;Lo-in to V-Card feature&lt;/li&gt;
                     &lt;li&gt;Input your V-Card number.&lt;/li&gt;
                  &lt;/ol&gt;
                &lt;/p&gt;
             &lt;/div&gt;
             &lt;div class="middle section"&gt;
                &lt;p class="title"&gt;How to use V-Card&lt;/p&gt;
                &lt;p class="main"&gt;
                  &lt;ol&gt;
                     &lt;li&gt;Find merchant who accept V-Card payment&lt;/li&gt;
                     &lt;li&gt;Stick QR-Code to Merchant Machine ‘&lt;i&gt;White Box&lt;/i&gt;’ Purse Pay.&lt;/li&gt;
                     &lt;li&gt;Check your transaction and credit amount from Purse Pay APP.&lt;/li&gt;
                  &lt;/ol&gt;
                &lt;/p&gt;
             &lt;/div&gt;
             &lt;div class="right section"&gt;
                &lt;p class="title"&gt;Tips to use V-card safely&lt;/p&gt;
                &lt;p class="main"&gt;
                  &lt;ol&gt;
                     &lt;li&gt;If you lost yout card, block your card immediately from Purse Pay App or you can contact our Customer Support &lt;span class="bold"&gt;150 555&lt;/span&gt;.&lt;/li&gt;
                     &lt;li&gt;Keep your pin secret&lt;/li&gt;
                     &lt;li&gt;Always update if you have changes on your data (Phone number, e-mail, shipping address, profile picture, etc)&lt;/li&gt;
                     &lt;li&gt;If you do not use your card anymore, please shred or cut your V-Card into pieces using magenetic shredder.&lt;/li&gt;
                     &lt;li&gt;Jika kartu sudah tidak lagi digunakan, harap untuk menggunting kartu V-card dengan gunting magnetik.&lt;/li&gt;
                  &lt;/ol&gt;
                &lt;/p&gt;
             &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
  </code></pre>
  
  <p>the result will looks like this in pdf, the div is overlapping and all the content is aligning to the left:</p>
  
  <p><a href="https://i.stack.imgur.com/DDp6I.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/DDp6I.png" alt="example"></a></p>
  
  <p>i want the result to have 3 column distributed evenly like this :</p>
  
  <p><a href="https://i.stack.imgur.com/t0Dj7.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/t0Dj7.png" alt="example"></a></p>
  
  <p>how can i achieve this?</p>