I have a visualforce page with "Create PDF" button. By default the page is displayed as regular html, when the button is clicked, same page is rendered as PDF. I am using panelGroup, panelGrid, dataTable for pdf output. I have three datatable each in their panelGroup. I want the panelGroup in 3 columned panelGrid all aligned to top. First dataTable will always have one record, but second and third dataTable might have multiple records or just one record. My problem is tables are aligned well if there are equal number of records in all dataTable, but they are not aligned properly if there are different number of records in second and third table.

<apex:repeat value="{!FinalList}" var="acctglscsr">

<!-- Single Row to display all the data -->

<apex:panelGrid columns="3">

<!-- Account Information Always single record-->
<apex:panelGroup id="accountInfo" layout="block">

<apex:dataTable value="{!acctglscsr.relAccount}" var="account" id="accountTable" styleClass="datatable_output" captionClass="datatable_caption" headerClass="datatable_header" style="width:490px;">
.

.

.

.</apex:dataTable>
</apex:panelGroup>

<!-- Goal Information can have single record or multiple record -->
<apex:panelGroup id="goalInfo" layout="block" style="vfloat:left;">
<apex:dataTable value="{!acctglscsr.goalList}" var="goal" id="goalTable" styleClass="datatable_output" captionClass="datatable_caption" headerClass="datatable_header" style="width:250px;">
.

.

.

.

</apex:dataTable>
</apex:panelGroup>

<!-- CSR II Information can have single or multiple records-->
<apex:panelGroup id="csriiInfo" layout="block" style="float:left;">
<apex:dataTable value="{!acctglscsr.csrList}" var="csrii" id="csriiTable" styleClass="datatable_output" captionClass="datatable_caption" headerClass="datatable_header" style="width:160px;">

.

.

.

.

.

</apex:dataTable>
</apex:panelGroup>

</apex:panelGrid>

Someone please help.