I am rendering a html code as pdf in visualforce page. But the tables in the page are going to the TOP. If I remove renderAs="pdf" and check the VF page, everything looks fine. Please advice. Thank you.

VF code:

<apex:page controller="AccountStatementVFController" renderAs="PDF">
    <div style="width: 100%;">
        <div style="width: 50%;float: left">
            <div style="width: 60%;font-weight: bold">
                Account info here
        <div style="width: 40%;float: right">
            <table cellspacing="0" cellpadding="0" style="width: 100%">
                <tr> all td comes here </td>
        <div style="width: 100%;float: left;clear: both">
        <div style="width: 100%">
            <table cellspacing="0" cellpadding="0" style="width: 100%;-Fs-table-paginate: paginate">
                <tr> All td lines comes here</tr>
         <div style="width: 100%;float: left">
        Another table below


ScreenShot: enter image description here

As you can see, The table is just merging to the top. Please check the expected screenshot which I am able to get if I remove renderAs="pdf".

EXPECTED page in the PDF Screenshot: enter image description here

  • 2
    See flying-saucer posts. The PDF generation in Salesforce does not support some of the more modern parts of CSS.
    – Keith C
    Commented Feb 12, 2021 at 10:38
  • Could you please suggest me any workarounds on getting this look. Thank you.
    – AshSFcloud
    Commented Feb 15, 2021 at 9:59


You must log in to answer this question.

Browse other questions tagged .