Using columns in a visual force page - salesforce

Question

I have a record field I am for a revenue breakdown. I need my columns to look like they do in the picture, which is the code I will display, except I need the revenue classification in the left column to be bottom in the right column.
When I try I get errors like cannot more than two child elements under page block items.
<apex:page standardController="EventPackageRevenueBreakdown__c"
extensions="EventPackageRevenueBreakdownExt" standardStylesheets="true"
tabstyle="EventPackageRevenueBreakdown__c">
<apex:form >
<apex:pageBlock mode="edit"
title="Event Package Revenue Breakdown Edit">
<apex:pageblockbuttons >
<apex:commandbutton action="{!save}" value="{!$Label.Package_Save}"></apex:commandbutton>
<apex:commandbutton action="{!SaveAndNew}"
value="{!$Label.Package_SaveAndNew}"></apex:commandbutton>
<apex:commandbutton action="{!cancel}"
value="{!$Label.Package_Cancel}"></apex:commandbutton>
</apex:pageblockbuttons>
<apex:pagemessages ></apex:pagemessages>
<apex:pageblocksection id="PackageEventInformationPBS"
title="{!$Label.Package_Information}">
<apex:pageBlockSectionItem >
<apex:outputpanel layout="block" styleClass="requiredInput"></apex:outputpanel>
</apex:pageBlockSectionItem>
<apex:outputpanel layout="block" styleClass="requiredBlock"></apex:outputpanel>
<apex:inputfield required="true"
value="{!EventPackageRevenueBreakdown__c.UnitPrice__c}"></apex:inputfield>
<apex:inputfield required="true"
value="{!EventPackageRevenueBreakdown__c.Location__c}"></apex:inputfield>
<apex:inputfield required="true"
value="{!EventPackageRevenueBreakdown__c.Name}"></apex:inputfield>
<apex:outputfield value="{!EventPackageRevenueBreakdown__c.BookingPackageEvent__c}" />
<apex:inputfield required="true"
value="{!EventPackageRevenueBreakdown__c.RevenueClassification__c}"></apex:inputfield>
</apex:pageblocksection>
<apex:pageblocksection title="Admin and Gratuity">
<apex:pageBlockSectionItem >
<apex:outputpanel layout="block" styleClass="requiredInput"></apex:outputpanel>
</apex:pageBlockSectionItem>
<apex:outputpanel layout="block" styleClass="requiredBlock"></apex:outputpanel>
<apex:inputfield required="false"
value="{!eventItem.AdminCharge__c}"></apex:inputfield>
<apex:inputfield required="false" value="{!eventItem.Gratuity__c}"></apex:inputfield>
</apex:pageblocksection>
</apex:pageBlock>
</apex:form>
</apex:page>

Answer 1

If the pageBlockSection is set to two columns (the default, I believe) then it lays out it's fields Left->Right, then down a row, then Left->Right again.
To push a field over , you can add an empty pageBlockSectionItem
You should layout out your fields like this:
<apex:pageblocksection id="PackageEventInformationPBS" title="{!$Label.Package_Information}" columns="2">
<apex:inputfield required="true" value="{!EventPackageRevenueBreakdown__c.UnitPrice__c}"/>
<apex:inputfield required="true" value="{!EventPackageRevenueBreakdown__c.Location__c}"/>
<apex:inputfield required="true" value="{!EventPackageRevenueBreakdown__c.Name}"/>
<apex:outputfield value="{!EventPackageRevenueBreakdown__c.BookingPackageEvent__c}"/>
</apex:pageBlockSectionItem> <!-- empty selectItem--> <apex:pageBlockSectionItem/>
<apex:inputfield required="true" value="{!EventPackageRevenueBreakdown__c.RevenueClassification__c}"/>
</apex:pageblocksection>