function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Antonio Jesús Criado ManzanequeAntonio Jesús Criado Manzaneque 

¿How can I split my text in two columns in a VF rendered as PDF? #CSS Not working properly

My code is something like that: 
<apex:page renderAs="pdf" standardController="Account" extensions="CNT_Generar_InfoAbante" sidebar="false" showHeader="false" applyBodyTag="false" >
    
    <head>
        <style type="text/css" media="print">
            #contenedorBody {
                column-count: 2;
                column-width: 100px;
                column-gap: 20px;
                text-align: justify;
                width: 100%;
                height: 1018px;
                max-width: 100%;
                max-height: 1018px;
            }

            .contenedorFooter {
                width: 100%;
                height: 48px;
                max-height 48px;
                /* background: rgb(255, 220, 206); */
            }
        </style>
    </head>
    <div id="contenedorBody">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
    <div class="contenedorFooter">
        <table>
            <tr>
                <td class="width70">&nbsp;</td>
                <td class="width30"><apex:image styleclass="imgFooter" width="145" height="46" value="{!$Resource.imgLogo}"/></td>
            </tr>
        </table>
    </div>
</apex:page>

But still displaying this:
User-added image

But this is what I want:
User-added image

Thank you all.
John TowersJohn Towers
You can use a table with cellspacing like this:
  
<table cellspacing="15">
            <tbody>
                <tr>
                    <td>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p></td>
                    
                    <td>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                    </td>
                </tr>
            </tbody>
        </table>

 
Antonio Jesús Criado ManzanequeAntonio Jesús Criado Manzaneque
Obviously, it could be a table, but this text is just an example. In my project, this text is taken from a record, so it should be automatically displayed in these columns. Thank you anyway.