+ Start a Discussion
RadDude89RadDude89 

Visualforce Page split into 2 columns

Hi,

I'm trying to change our visualforce page so that it is seperated into 2 columns with a header above each column.
However we I check the page the section headers are on the left side and the field labels appears to be missing too.

Below is the visualforce code:

   <apex:pageBlockSection columns="2">
            <div class="brandTertiaryBgr pbSubheader tertiaryPalette" id="head_1_ep">
                <span class="pbSubExtra">
                    <span class="requiredLegend brandTertiaryFgr">
                        <span class="requiredExampleOuter">
                            <span class="requiredExample"></span>
                        </span>
                        <span class="requiredMark">*</span>&nbsp;
                        <span class="requiredText">= Required Information</span>
                    </span>
                </span>
                <h3>Account Information<span  class="titleSeparatingColon">:</span></h3>
            </div>
            <apex:pageblocksectionitem >
            <apex:outputLabel value="Column 1"/>
            <apex:outputPanel layout="block">
                <apex:outputText label="Lead Owner" value="{!currentUserName}" />
                <apex:inputField label="Lead Source" value="{!newLead.LeadSource}" />
                <apex:inputField label="Lead Status" value="{!newLead.Status}" required="true" />
                <apex:inputField label="Fuel Type" value="{!newLead.Fuel_Type__c}" />
                <apex:inputField label="Region" value="{!newLead.Region__c}" />
                <apex:outputField value="{!newLead.RecordTypeId}" />
                </apex:outputPanel>
                </apex:pageblocksectionitem>
                  <div class="brandTertiaryBgr pbSubheader tertiaryPalette" id="head_1_ep">
                <span class="pbSubExtra">
                    <span class="requiredLegend brandTertiaryFgr">
                        <span class="requiredExampleOuter">
                            <span class="requiredExample"></span>
                        </span>
                        <span class="requiredMark">*</span>&nbsp;
                        <span class="requiredText">= Required Information</span>
                    </span>
                </span>
                <h3>Account Information<span  class="titleSeparatingColon">:</span></h3>
            </div>
                <apex:pageblocksectionItem >
                <apex:outputLabel value="Column 2"/>
                <apex:outputPanel layout="block">
                <apex:inputField value="{!newLead.Consumption__c}" />
                <apex:inputField value="{!newLead.Dual_Fuel__c}" />
              <!--  <apex:inputField value="{!newLead.Eligibility_for_QH_Metering__c}" /> -->
                <apex:inputField value="{!newLead.Associated_Dual_Fuel_Site__c}" />
                <apex:inputField value="{!newLead.Qualification_Check__c}" />
                <apex:inputField value="{!newLead.GMPRN__c}" />
               <!-- <apex:inputField value="{!newLead.Burn_Hour_Calender__c}" /> -->
                <apex:inputField value="{!newLead.Electricity_Tax__c}" />               
                <apex:inputField value="{!newLead.Government_Non_Government__c}" required="true" />
                </apex:outputPanel>
                </apex:pageBlockSectionItem>
            </apex:pageBlockSection>

Can anyone see what I am doing wrong here?  Is it posible to have a heading on each column with the field names appearing?User-added image

Any help is much appreciated.

Thanks in advance

Best Answer chosen by RadDude89
mritzimritzi
Following is a quickfix skeleton that is in two separate columns.
you can always modify internal content it to suit your needs.

VF:
<apex:page>
    <style>
        #col1,#col2{width:49%;display:inline-block;}
    </style>
    <apex:form >
        <div id="col1">
            <apex:pageblock title="PageBlock Header1">
                <apex:pageblockSection title="Section title1">
                    Field1: <apex:inputText />
                </apex:pageblockSection>
                <apex:pageblockButtons >
                    <apex:commandButton value="Save"/>
                </apex:pageblockButtons>
            </apex:pageblock>
        </div>
        <div id="col2">
            <apex:pageblock title="PageBlock Header2">
                <apex:pageblockSection title="Section title2">
                    Field1: <apex:inputText />
                </apex:pageblockSection>
                <apex:pageblockButtons >
                    <apex:commandButton value="Save"/>
                </apex:pageblockButtons>
            </apex:pageblock>
        </div>       
    </apex:form>
</apex:page>

If this helps you out, please mark it Best Answer.