How set two pageblock-Elements parallel in Visualforce?

user987144 picture user987144 · Mar 3, 2013 · Viewed 8.3k times · Source

I want to set two pageblock-Elements parallel with Visualforce. How can I do that?

<apex:page>

<apex:pageblock title="titleA" id="blockA">

</apex:pageblock>

<apex:pageblock title="titleB" id="blockB">

</apex:pageblock>

</apex:page>

Thank you

Answer

eyescream picture eyescream · Mar 4, 2013

That's really a CSS question I'd say, about floating divs next to each other, using CSS for page layout etc. It's been asked on SO numerous times. Wrap them it into an <apex:outputPanel>, play with float:right etc and you should be good to go.

If you want a pure Visualforce solution and aren't comfortable with CSS you can render them into a table. There's whole philosophical debate about how tables shouldn't be used for layouts though ;)

<apex:panelGrid> should be simplest to use in that case.

<apex:page>
    <apex:panelGrid columns="2">
        <apex:pageblock title="titleA" id="blockA">
        </apex:pageblock>
        <apex:pageblock title="titleB" id="blockB">
        </apex:pageblock>
    </apex:panelGrid>
</apex:page>