How to keep two elements side by side in PDF with mPDF library?

Question

I am able to keep two elements side by side on web page but not in PDF generated with mPDF. First element is a 'div' element and second element is image. I tried by setting 'display' properties. But mPDF has some limitations with inline block elements. Your help is appreciated. Thank you.

Code structure is like this:

<div>
   <h4><span>Some Text</span></h4>
   <span>Some other text</span>
</div>

<img src="some_url">

The PDF is generated with "WriteHTML" function call of mPDF. I'm passing whole HTML to this function to write HTML to document.

score 5 · Answer 1 · answered Oct 04 '18 at 15:10

This worked for me. I've added inline styles to directly apply them in PDF.

<div style="width: 100%;">
  <div align="left" style="width: 50%;float: left;">
    <h4><span>Some Text</span></h4>
    <span>Some other text</span>
  </div>

  <div align="left" style="width: 50%;float: left;">
    <img src="https://via.placeholder.com/350x150" style="max-width:150px;height:auto"/>
   </div>
</div>

score 1 · Answer 2 · answered Sep 22 '20 at 15:03

This is will work perfect for you, because I am using mpdf that's why...

.col6 {width:50%;float:left;}
.col12 {width:100%;float:left;}

<div class="col12">
    <div class="col6">  
        <h4>Some Text</h4>
        <div>Some other text</div>
    </div>
    <div class="col6">
        <img src="https://via.placeholder.com/350x150" />
    </div>
</div>

score 0 · Answer 3 · answered Apr 22 '19 at 11:58

Try this one It worked for me definitely it will be helpful for you. this div has two div one div keep the background image another one has text try this.

 <div style="width:666px; height:450px;position:fixed;margin:0;padding:0;">
<div style="width:332px;margin:0;padding:0;height:100%;float:left;background-position: center;background-repeat: no-repeat;background-image:url(https://via.placeholder.com/350x150);background-size:100px 100px;overflow:auto;background-origin:content-box;position:relative;">
first div</div>
<div style="width:50%;margin:0;padding:0;height:100%;">second div</div>
</div>

score -1 · Answer 4 · answered Oct 04 '18 at 13:21

-1

Try this one It will be help for you.

#inline{width:100%;height:auto;background-color:black;display:flex;}
 .one,.two{width:50%;height:auto;background-color:green;margin:10px;}
  .two img{width:100%;}

<div id="inline">
 <div class="one"> 
  <h4><span>Some Text</span></h4>
     <span>Some other text</span>
 </div>
 <div class="two">
  <img src="https://via.placeholder.com/350x150" />
 </div>
</div>

answered Oct 04 '18 at 13:21

Vijay Prajapati

75
7

Thank you @Vijay. But, it worked in web (HTML) page (Already working on the page) but not in PDF. Still the ".two" element goes to new line. By the way, I could fix my problem with the use of some CSS properties like 'width' and 'float' and with 'align' attribute. For reference, https://mpdf.github.io/what-else-can-i-do/floating-blocks.html – suyogb Oct 04 '18 at 14:59
Welcome @suyogb check below link, I think it will help for you. https://stackoverflow.com/questions/30258066/fpdf-align-text-left-center-and-right/30258455 Thanks. – Vijay Prajapati Oct 04 '18 at 15:09
mPdf doesn't support flexbox – Amin Apr 14 '20 at 18:27

How to keep two elements side by side in PDF with mPDF library?

4 Answers4