• Alex Waddell 17
  • NEWBIE
  • 80 Points
  • Member since 2018

  • Chatter
    Feed
  • 0
    Best Answers
  • 0
    Likes Received
  • 0
    Likes Given
  • 21
    Questions
  • 12
    Replies
Hello,

I am writing a trigger to update Correspondence records that exist within a certain Pay Period and Year. This information is collected in the Batch record that fires my trigger

The problem I am having is that my Set <Correspondence> SOQL query throws 20+ errors whenever I add a where clause

User-added image
trigger ACH_Email_Update_Trigger_Batch on Batch__c (before update) {
    for(Batch__c b : trigger.New){
        String PayPeriod = b.Pay_Period__c;
        String Year = b.Year__c;
    }
    
    Set <Correspondence__c> MyCorr = New  Set <Correspondence__c> 
        ([Select id, year__c, Pay_Period__c From Correspondence__c Where Pay_Period__c = year]);
      
}
Any ideas?
 
Hello,

I need to make the font size smaller on my page. I have the following styling on the page but when i change the font-size from 12 to 8 nothing happens.
body {
                font-family: sans-serif;
                font-size:12px;
                }
I want to be able to make the font on the entire page a few sizes smaller, below is my entire block of code
 
<apex:page standardController="Correspondence__c" renderAs="pdf" >
    <html>
        <head>
            <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
            <style type="text/css">
                body {
                font-family: sans-serif;
                font-size:12px;
                }
              mybox {
    				width: 320px;
					height:100px;
                    padding: 10px;
                    background-color: lightblue;
                    border: 2px solid gray;
                    margin: 0; 
					} 
               
            </style>      
        </head>    
        <body>   
            <table cellpadding="6" width="100%">
                <tr>
                    <td>
                        <apex:outputPanel >
                            <apex:image url="/servlet/servlet.FileDownload?file=0151D0000005bAO" width="150" Height="75"/>
                        </apex:outputPanel>
                    </td>
                    <td>
                        <apex:outputPanel >
                            Case Information
                        </apex:outputPanel>
                    </td>
                    <td>
                        <apex:outputPanel >
                            Form 2067
                        </apex:outputPanel>
                    </td>    
                </tr>
            </table>  


 <table cellpadding="6" width="70%">
                <tr>
                    <td style="vertical-align: text-top;">
                            To:
				    </td><td>
                        <div class="mybox">
        		<apex:outputField value="{!Correspondence__c.Payer_Name__c}"/><br/>
                <apex:outputField value="{!Correspondence__c.Payer_Fax_Number__c}"/><br/>
										
						</div>
                    </td>
                    <td style="vertical-align: text-top;">                      
                            From:
			       </td><td>
                        <div class="mybox">       			
                Outreach Health Services<br/>
        		251 W Renner Rd, <br/>
        		Richardson, TX 75080 
						</div>
                    </td>
                </tr>
            </table>       
             <table style="width:100%" border="1">


          <tr>
            <td>Case Name
                <br></br>
            <apex:outputField Value="{!Correspondence__c.Case_Name__c}" />
            </td>

            <td>Category <br></br> PERS</td>
            <td>Case No. <br></br> <apex:outputField Value="{!Correspondence__c.Case_No__c}"/></td>
            <td>Category<br></br> &nbsp;  </td>
            <td>Case No.<br></br> &nbsp;  </td>
          </tr>
          <tr width = "100%">
            <td width = "32%"></td>
            <td width = "11%"></td>
            <td width = "11%"> </td>
            <td width = "11%"></td>
            <td width = "15%">
            </td>
          </tr>         

        </table>        
        <table style="width:100%" border="1">


          <tr>

            <td>Address(Street, City, State, ZIP Code)
                <br></br>
            <apex:outputField Value="{!Correspondence__c.Patient_Address__c}"/>
              </td>
            <td>Area Code and Telephone No.
                <br></br>
    <apex:outputField Value="{!Correspondence__c.Payer_Fax_Number__c}"/>   
				</td>
                
            
          </tr>
          <tr width = "100%">
            <td width = "60%"></td>
            <td width = "40%"></td>
          </tr>         

        </table>        
   <b>Please Check all that apply.</b>  
<br></br>
<br></br>
             <table style="width:100%">


          <tr>
            <td><apex:outputField Value="{!Correspondence__c.VF_Checkbox__c}"/></td>
            <td> Absent Parent</td>
            <td><apex:outputField Value="{!Correspondence__c.VF_Checkbox__c}"/></td>
            <td>Change in Address/Telephone</td>  
            <td><apex:outputField Value="{!Correspondence__c.VF_Checkbox__c}"/></td>
            <td>Change in Circumstances </td>
            <td><apex:outputField Value="{!Correspondence__c.VF_Checkbox__c}"/></td>
            <td>Child Care</td>  
			<td><apex:outputField Value="{!Correspondence__c.VF_Checkbox__c}"/></td>
            <td>Community Placement Resources</td>
          </tr>      
          <tr width = "100%">
            <td width = "5%"></td>
            <td width = "15%"></td>
            <td width = "5%"></td>
            <td width = "15%"></td>
            <td width = "5%"></td>
            <td width = "15%"></td>
            <td width = "5%"></td>
            <td width = "15%"></td>
            <td width = "5%"></td>
            <td width = "15%"></td>
          </tr> 
        </table> 
             <table style="width:100%">
                 
          <tr>
            <td><apex:outputField Value="{!Correspondence__c.VF_Checkbox__c}"/></td>
            <td> Deductions</td>
            <td><apex:outputField Value="{!Correspondence__c.VF_Checkbox__c}"/></td>
            <td>Employment Services</td>  
            <td><apex:outputField Value="{!Correspondence__c.VF_Checkbox__c}"/></td>
            <td>EPSDT </td>
            <td><apex:outputField Value="{!Correspondence__c.VF_Checkbox__c}"/></td>
            <td>Family Health Services Name</td>  
			<td><apex:outputField Value="{!Correspondence__c.VF_Checkbox__c}"/></td>
            <td>Family Planning</td>
          </tr>       
          <tr width = "100%">
            <td width = "5%"></td>
            <td width = "15%"></td>
            <td width = "5%"></td>
            <td width = "15%"></td>
            <td width = "5%"></td>
            <td width = "15%"></td>
            <td width = "5%"></td>
            <td width = "15%"></td>
            <td width = "5%"></td>
            <td width = "15%"></td>
          </tr>
        </table> 

             <table style="width:100%">
                 
          <tr>
            <td><apex:outputField Value="{!Correspondence__c.VF_Checkbox__c}"/></td>
            <td> Household Composition</td>
            <td><apex:outputField Value="{!Correspondence__c.VF_Checkbox__c}"/></td>
            <td>Income</td>  
            <td><apex:outputField Value="{!Correspondence__c.VF_Checkbox__c}"/></td>
            <td>LTSS Information Shared </td>
            <td><apex:outputField Value="{!Correspondence__c.VF_Checkbox__c}"/></td>
            <td>Medicaid</td>  
			<td><apex:outputField Value="{!Correspondence__c.VF_Checkbox__c}"/></td>
            <td>Medical/Disability</td>
          </tr>       
          <tr width = "100%">
            <td width = "5%"></td>
            <td width = "15%"></td>
            <td width = "5%"></td>
            <td width = "15%"></td>
            <td width = "5%"></td>
            <td width = "15%"></td>
            <td width = "5%"></td>
            <td width = "15%"></td>
            <td width = "5%"></td>
            <td width = "15%"></td>
          </tr>
        </table> 
             <table style="width:100%">
                 
          <tr>
            <td><apex:outputField Value="{!Correspondence__c.VF_Checkbox__c}"/></td>
            <td> MERP Shared</td>
            <td><apex:outputField Value="{!Correspondence__c.VF_Checkbox__c}"/></td>
            <td>Nursing Care/Level of Care</td>  
            <td><apex:outputField Value="{!Correspondence__c.VF_Checkbox__c}"/></td>
            <td>Protective Services</td>
            <td><apex:outputField Value="{!Correspondence__c.VF_Checkbox__c}"/></td>
            <td>Refugee Services</td>  
			<td><apex:outputField Value="{!Correspondence__c.VF_Checkbox__c}"/></td>
            <td>Resources</td>
          </tr>       
          <tr width = "100%">
            <td width = "5%"></td>
            <td width = "15%"></td>
            <td width = "5%"></td>
            <td width = "15%"></td>
            <td width = "5%"></td>
            <td width = "15%"></td>
            <td width = "5%"></td>
            <td width = "15%"></td>
            <td width = "5%"></td>
            <td width = "15%"></td>
          </tr>
        </table>
             <table style="width:100%">
                 
          <tr>
            <td><apex:outputField Value="{!Correspondence__c.VF_Checkbox__c}"/></td>
            <td> MERP Shared</td>
            <td><apex:outputField Value="{!Correspondence__c.VF_Checkbox__c}"/></td>
            <td>Nursing Care/Level of Care</td>  
            <td><apex:outputField Value="{!Correspondence__c.Other__c}"/></td>
            <td>Other</td>
            <td><apex:outputField Value="{!Correspondence__c.Reason_for_Form__c}"/></td>
          </tr>       
          <tr width = "100%">
            <td width = "4%"></td>
            <td width = "14%"></td>
            <td width = "5%"></td>
            <td width = "14%"></td>
            <td width = "5%"></td>
            <td width = "5%"></td>
            <td width = "60%"></td>
          </tr>
        </table>
        </body>
    </html>
</apex:page>

 
Hello Everyone,

I am trying to create 2 boxes that I can place Apex:Outputfield's inside to have Salesforce populate the To's and From's for my document.

User-added image
I need the page to RenderAs="PDF" so i am limited to the older css styling rather than the new SLDS styling

below is my code so far:
<apex:page standardController="Account" renderAs="pdf" >
    <html>
        <head>
            <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
            <style type="text/css">
                body {
                font-family: sans-serif;
                font-size:12px;
                }
            </style>      
        </head>    
        <body>   
            <table cellpadding="6" width="100%">
                <tr>
                    <td>
                        <apex:outputPanel >
                            <apex:image url="/servlet/servlet.FileDownload?file=0151D0000005bAO" width="150" Height="75"/>
                        </apex:outputPanel>
                    </td>
                    <td>
                        <apex:outputPanel >
                            Case Information
                        </apex:outputPanel>
                    </td>
                    <td>
                        <apex:outputPanel >
                            Form 2067
                        </apex:outputPanel>
                    </td>    
                </tr>
            </table>  
              <table cellpadding="6" width="70%">
                <tr>
                    <td>
                        <apex:outputPanel >
                            To:
                        </apex:outputPanel>
                    </td>
                    <td>
                        <apex:outputPanel >
                            From:
                        </apex:outputPanel>
                    </td>

                </tr>
            </table>           
            
            
        </body>
    </html>
</apex:page>

Any Ideas?
Hello,

I am trying to recreate the following header in Visual Force

User-added image

 I have the image, Case information and Form 2067 values all placed side by side but they are all floating left. How can i edit the code to push the Case information into the center and the Form 2067 all the way to the right?

User-added image
 
<apex:page standardController="Service_Plans__c" renderAs="pdf" >


   <apex:pageBlock >
           <apex:pageBlockSection columns="3">

           
           <apex:outputPanel >
 <apex:image url="/servlet/servlet.FileDownload?file=0151D0000005bAO" width="150" Height="75"/>
           </apex:outputPanel>
           
           
           <apex:outputPanel >
              Case Information
           </apex:outputPanel>
           
           
            <apex:outputPanel >
               Form 2067
           </apex:outputPanel>

       </apex:pageBlockSection>
   </apex:pageBlock>
</apex:page>


 
Hello,

I recently made a flow that uses a Record Lookup to find the Area__c record that matches the Zip Code under the Account's BillingPostalCode field. It then used a Record update to place the id of the Area__c record into a field on the Account page (a lookup to Areas called Area__c)

The problem with that structure is that when I tried to upload a few hundred accounts, I ran into a bulk error for running too many SOQL queries...

Now I have to rebuild the Flow using Fast Lookups and I am stuck at the following place

Currently, I have a Fast Lookup to Accounts (since I could have 1 or many accounts being updated at once) that places the Billing Zips and Area__c fields into the collection variable
User-added image
User-added image
Now what I am confused on is when I should look up the area__c object to querie a record where the Area__r.Name = Account.BillingPostalCode.
Should that lookup be before or after the Loop? Do i need to use a fast lookup or a Record Lookup (since there is only 1 area__c record for every Zip)?

The Flow I used before worked perfectly on a single record update but as soon as I started to try and import my member list everything failed. Could anyone help me recreate my old flow to allow for the importing of more than 100 records?
Below is the basic structure of my old Flow:

User-added image


 
Hello everyone,

After spending a few days creating a VF page using the new SLDS markup i learned that I cannot use the renderAs = "PDF" to make my VF page into a PDF...

When I add the renderAs = "PDF", I get the error: An internal server error has occurred.

Seeing that downloading our VF page is essential to our needs, Does anyone have any ideas on how to make a PDF when using SLDS?

Would i have to rewrite my VF page without using any of the new SLDS? or is there some way around this?

Below is my code in case that's helpful to you:
 
<apex:page standardcontroller="Correspondence__c" >
<head>
  <!-- Import the Design System style sheet -->
  <apex:slds />
</head>
    <body class="slds-scope">        
        <div class="slds-grid slds-grid_vertical-align-end slds-grid_align-spread" style="height:100px">
            <div class="slds-col slds-p-horizontal_medium">
                <span><apex:image url="/servlet/servlet.FileDownload?file=0151N000002lmHx" width="256" height="150"/> </span>
            </div>
            <div class="slds-col slds-text-heading_large slds-text-align_center">
                <span>Case Information</span>
            </div>
            <div class="slds-col slds-p-horizontal_medium slds-text-heading_medium slds-text-align_right">
                <span>Form 2068<br></br>December 2012-E</span>
        </div>        
    </div>
 <Div class="slds-scope" style="float:Right;margin-right: 400px;">
    <div class="slds-scope slds-text-heading--label slds-m-bottom--small">
    <p class="slds-text-heading--label slds-m-bottom--small"> <br></br>
      From:  
        </p>
<div class="slds-box" Style="height:100px;width:300px;">
        Outreach Health Services<br/>
        1234 West East Street Tempe, AZ 85281
  </div>
</Div>
  </div>
    <br></br>
  <!-- REQUIRED SLDS WRAPPER -->
  <div class="slds-scope" style="float:Left; Position:Absolute; width:100%">
    <!-- MASTHEAD -->

    <p class="slds-text-heading--label slds-m-bottom--small" style="margin-left:50px;">
      To:  
        </p>
         <div class="slds-box" style="float:Left; margin-left:50px; height:100px;width:300px; ">
         <apex:outputField value="{!Correspondence__c.Payer_Name__c}"/><br/>
        <apex:outputField value="{!Correspondence__c.Payer_Fax_Number__c}"/>
</div>

      <br></br>  <br></br>  <br></br>
    <div class="slds-scope" style="float:Left; position:absolute; width:100%">  
      <br></br>  <br></br>  <br></br>  <br></br>
<table class="slds-table slds-table_bordered slds-table_cell-buffer">
  <thead>
    <tr class="slds-text-title_caps">
      <th scope="col">
        <div class="slds-truncate" title="Case Name">Case Name</div>
      </th>
      <th scope="col">
        <div class="slds-truncate" title="Category 1">Category</div>
      </th>
      <th scope="col">
        <div class="slds-truncate" title="Case Number 1">Case Number</div>
      </th>
      <th scope="col">
        <div class="slds-truncate" title="Category 2">Category</div>
      </th>
      <th scope="col">
        <div class="slds-truncate" title="Case Number 2">Case Number</div>
      </th>
    </tr>
  </thead>
    <tbody>
    <tr>
      <td scope="row" data-label="Case Name">
        <div class="slds-truncate" title="Current Case Name">{!Correspondence__c.Case_Name__c}</div>
      </td>
      <td scope="row" data-label="Category 1">
        <div class="slds-truncate" title="Category 1">PERS</div>
      </td>
        <td scope="row" data-label="Case Number 1">
        <div class="slds-truncate" title="Case Number 1">1234567</div>
      </td>
      <td scope="row" data-label="Category 2">
        <div class="slds-truncate" title="Category 2"></div>
      </td>
        <td scope="row" data-label="Case Number 2">
        <div class="slds-truncate" title="Case Number 2"></div>
      </td>
        </tr>
  </tbody>
</table>
<table class="slds-table slds-table_bordered slds-table_cell-buffer">
  <thead>
    <tr class="slds-text-title_caps">
      <th scope="col">
        <div class="slds-truncate" title="Current Address">Adress(Street, City, Zip Code)</div>
      </th>
      <th scope="col">
        <div class="slds-truncate" title="Category 1">Area Code and Telephone No</div>
      </th>
    </tr>
  </thead>
    <tbody>
    <tr>
      <td scope="row" data-label="Current Address">
        <div class="slds-truncate" title="Current Adress">{!Correspondence__c.Patient_Address__c}</div>
      </td>
        <td scope="row" data-label="Area Code and Telephone No">
        <div class="slds-truncate" title="Area Code and Telephone No">(480)7205699</div>
      </td>
        </tr>
  </tbody>
</table>
    <br></br><br></br>

<div class="slds-grid">
  <div class="slds-col slds-col slds-size_1-of-5"> 
    <div class="slds-form-element">
  <div class="slds-form-element__control">
    <span class="slds-checkbox">
      <input type="checkbox" name="Absent Parent" id="Absent Parent" value="off" />
      <label class="slds-checkbox__label" for="Absent Parent">
        <span class="slds-checkbox_faux"></span>
        <span class="slds-form-element__label">Absent Parent</span>
      </label>
    </span>
  </div>
</div>
    </div>
  <div class="slds-col slds-col slds-size_1-of-5"> <div class="slds-form-element">
  <div class="slds-form-element__control">
    <span class="slds-checkbox">
        <input type="checkbox" name="Change in Adress/Telephone" id="Change in Adress/Telephone" value="Off" />
      <label class="slds-checkbox__label" for="Change in Adress/Telephone">
        <span class="slds-checkbox_faux"></span>
        <span class="slds-form-element__label">Change in Adress/Telephone</span>
      </label>
    </span>
  </div>
</div> </div>
      <div class="slds-col slds-col slds-size_1-of-5"> <div class="slds-form-element">
  <div class="slds-form-element__control">
    <span class="slds-checkbox">
      <input type="checkbox" name="Change in Circumstances" id="Change in Circumstances" value="off" />
      <label class="slds-checkbox__label" for="Change in Circumstances">
        <span class="slds-checkbox_faux"></span>
        <span class="slds-form-element__label">Change in Circumstances</span>
      </label>
    </span>
  </div>
</div> </div>
      <div class="slds-col slds-col slds-size_1-of-5"> <div class="slds-form-element">
  <div class="slds-form-element__control">
    <span class="slds-checkbox">
      <input type="checkbox" name="Child Care" id="Child Care" value="off" />
      <label class="slds-checkbox__label" for="Child Care">
        <span class="slds-checkbox_faux"></span>
        <span class="slds-form-element__label">Child Care</span>
      </label>
    </span>
  </div>
</div> </div>
      <div class="slds-col slds-col slds-size_1-of-5"> <div class="slds-form-element">
  <div class="slds-form-element__control">
    <span class="slds-checkbox">
      <input type="checkbox" name="Community Placement Resources" id="Community Placement Resources" value="off" />
      <label class="slds-checkbox__label" for="Community Placement Resources">
        <span class="slds-checkbox_faux"></span>
        <span class="slds-form-element__label">Community Placement Resources</span>
      </label>
    </span>
  </div>
</div> </div>
</div>
<br></br>
<div class="slds-grid">
  <div class="slds-col slds-col slds-size_1-of-5"> 
    <div class="slds-form-element">
  <div class="slds-form-element__control">
    <span class="slds-checkbox">
      <input type="checkbox" name="Deductions" id="Deductions" value="off" />
      <label class="slds-checkbox__label" for="Deductions">
        <span class="slds-checkbox_faux"></span>
        <span class="slds-form-element__label">Deductions</span>
      </label>
    </span>
  </div>
</div>
    </div>
  <div class="slds-col slds-col slds-size_1-of-5"> <div class="slds-form-element">
  <div class="slds-form-element__control">
    <span class="slds-checkbox">
        <input type="checkbox" name="Employment Services" id="Employment Services" value="Off" />
      <label class="slds-checkbox__label" for="Employment Services">
        <span class="slds-checkbox_faux"></span>
        <span class="slds-form-element__label">Employment Services</span>
      </label>
    </span>
  </div>
</div> </div>
      <div class="slds-col slds-col slds-size_1-of-5"> <div class="slds-form-element">
  <div class="slds-form-element__control">
    <span class="slds-checkbox">
      <input type="checkbox" name="EPSDT" id="EPSDT" value="off" />
      <label class="slds-checkbox__label" for="EPSDT">
        <span class="slds-checkbox_faux"></span>
        <span class="slds-form-element__label">EPSDT</span>
      </label>
    </span>
  </div>
</div> </div>
      <div class="slds-col slds-col slds-size_1-of-5"> <div class="slds-form-element">
  <div class="slds-form-element__control">
    <span class="slds-checkbox">
      <input type="checkbox" name="Family Health Services Nurse" id="Family Health Services Nurse" value="off" />
      <label class="slds-checkbox__label" for="Family Health Services Nurse">
        <span class="slds-checkbox_faux"></span>
        <span class="slds-form-element__label">Family Health Services Nurse</span>
      </label>
    </span>
  </div>
</div> </div>
      <div class="slds-col slds-col slds-size_1-of-5"> <div class="slds-form-element">
  <div class="slds-form-element__control">
    <span class="slds-checkbox">
      <input type="checkbox" name="Family Planning" id="Family Planning" value="off" />
      <label class="slds-checkbox__label" for="Family Planning">
        <span class="slds-checkbox_faux"></span>
        <span class="slds-form-element__label">Family Planning</span>
      </label>
    </span>
  </div>
</div> </div>
</div>
<br></br>
<div class="slds-grid">
  <div class="slds-col slds-col slds-size_1-of-5"> 
    <div class="slds-form-element">
  <div class="slds-form-element__control">
    <span class="slds-checkbox">
      <input type="checkbox" name="Household Composition" id="Household Composition" value="off" />
      <label class="slds-checkbox__label" for="Household Composition">
        <span class="slds-checkbox_faux"></span>
        <span class="slds-form-element__label">Household Composition</span>
      </label>
    </span>
  </div>
</div>
    </div>
  <div class="slds-col slds-col slds-size_1-of-5"> <div class="slds-form-element">
  <div class="slds-form-element__control">
    <span class="slds-checkbox">
        <input type="checkbox" name="Income" id="Income" value="Off" />
      <label class="slds-checkbox__label" for="Income">
        <span class="slds-checkbox_faux"></span>
        <span class="slds-form-element__label">Income</span>
      </label>
    </span>
  </div>
</div> </div>
      <div class="slds-col slds-col slds-size_1-of-5"> <div class="slds-form-element">
  <div class="slds-form-element__control">
    <span class="slds-checkbox">
      <input type="checkbox" name="LTSS Information Shared" id="LTSS Information Shared" value="off" />
      <label class="slds-checkbox__label" for="LTSS Information Shared">
        <span class="slds-checkbox_faux"></span>
        <span class="slds-form-element__label">LTSS Information Shared</span>
      </label>
    </span>
  </div>
</div> </div>
      <div class="slds-col slds-col slds-size_1-of-5"> <div class="slds-form-element">
  <div class="slds-form-element__control">
    <span class="slds-checkbox">
      <input type="checkbox" name="Medicaid" id="Medicaid" value="off" />
      <label class="slds-checkbox__label" for="Medicaid">
        <span class="slds-checkbox_faux"></span>
        <span class="slds-form-element__label">Medicaid</span>
      </label>
    </span>
  </div>
</div> </div>
      <div class="slds-col slds-col slds-size_1-of-5"> <div class="slds-form-element">
  <div class="slds-form-element__control">
    <span class="slds-checkbox">
      <input type="checkbox" name="Medical/Disability" id="Medical/Disability" value="off" />
      <label class="slds-checkbox__label" for="Medical/Disability">
        <span class="slds-checkbox_faux"></span>
        <span class="slds-form-element__label">Medical/Disability</span>
      </label>
    </span>
  </div>
</div> </div>
</div>
<br></br>
<div class="slds-grid">
  <div class="slds-col slds-col slds-size_1-of-5"> 
    <div class="slds-form-element">
  <div class="slds-form-element__control">
    <span class="slds-checkbox">
      <input type="checkbox" name="MERP Shared" id="MERP Shared" value="off" />
      <label class="slds-checkbox__label" for="MERP Shared">
        <span class="slds-checkbox_faux"></span>
        <span class="slds-form-element__label">MERP Shared</span>
      </label>
    </span>
  </div>
</div>
    </div>
  <div class="slds-col slds-col slds-size_1-of-5"> <div class="slds-form-element">
  <div class="slds-form-element__control">
    <span class="slds-checkbox">
        <input type="checkbox" name="Nursing Care/Level of Care" id="Nursing Care/Level of Care" value="Off" />
      <label class="slds-checkbox__label" for="Nursing Care/Level of Care">
        <span class="slds-checkbox_faux"></span>
        <span class="slds-form-element__label">Nursing Care/Level of Care</span>
      </label>
    </span>
  </div>
</div> </div>
      <div class="slds-col slds-col slds-size_1-of-5"> <div class="slds-form-element">
  <div class="slds-form-element__control">
    <span class="slds-checkbox">
      <input type="checkbox" name="Protective Services" id="Protective Services" value="off" />
      <label class="slds-checkbox__label" for="Protective Services">
        <span class="slds-checkbox_faux"></span>
        <span class="slds-form-element__label">Protective Services</span>
      </label>
    </span>
  </div>
</div> </div>
      <div class="slds-col slds-col slds-size_1-of-5"> <div class="slds-form-element">
  <div class="slds-form-element__control">
    <span class="slds-checkbox">
      <input type="checkbox" name="Refugee Services" id="Refugee Services" value="off" />
      <label class="slds-checkbox__label" for="Refugee Services">
        <span class="slds-checkbox_faux"></span>
        <span class="slds-form-element__label">Refugee Services</span>
      </label>
    </span>
  </div>
</div> </div>
      <div class="slds-col slds-col slds-size_1-of-5"> <div class="slds-form-element">
  <div class="slds-form-element__control">
    <span class="slds-checkbox">
      <input type="checkbox" name="Resources" id="Resources" value="off" />
      <label class="slds-checkbox__label" for="Resources">
        <span class="slds-checkbox_faux"></span>
        <span class="slds-form-element__label">Resources</span>
      </label>
    </span>
  </div>
</div> </div>
</div>
<br></br>
<div class="slds-grid">
    <div class="slds-col  slds-col slds-size_1-of-5"> 
        <div class="slds-form-element">
            <div class="slds-form-element__control">
                <span class="slds-checkbox">
                    <input type="checkbox" name="Support Services" id="Support Services" value="off" />
                    <label class="slds-checkbox__label" for="Support Services">
                        <span class="slds-checkbox_faux"></span>
                        <span class="slds-form-element__label">Support Services</span>
                    </label>
                </span>
            </div>
        </div>
    </div>
    <div class="slds-col slds-col slds-size_1-of-5"> <div class="slds-form-element">
        <div class="slds-form-element__control">
            <span class="slds-checkbox">
                <input type="checkbox" name="TANF" id="TANF" value="Off" />
                <label class="slds-checkbox__label" for="TANF">
                    <span class="slds-checkbox_faux"></span>
                    <span class="slds-form-element__label">TANF</span>
                </label>
            </span>
        </div>
        </div> </div>
        <div class="slds-col slds-col slds-size_1-of-5"> <div class="slds-form-element">
        <div class="slds-form-element__control">
<apex:outputField label="Other" Value="{!Correspondence__c.Other__c}"/>
          <apex:outputLabel >Other: </apex:outputLabel> 
        </div>
        </div> </div>
        <div class="slds-col"> <div class="slds-form-element">
        <div class="slds-form-element__control">
            <u> <apex:outputField label="Reason for 2067" value="{!Correspondence__c.Reason_for_Form__c}"/> </u>
       
        </div>
        </div> </div>

<br></br>
</div>
<br></br>
<div>
    <span>
        <apex:outputLabel >Comments/Response: </apex:outputLabel> <br></br>
    <Div class="slds-box" Style="height:125px;">
          <apex:outputField label="Comments/Response" value="{!Correspondence__c.Comment_Response__c}"/>  
    </Div>
<br></br><br></br>
<div class="slds-grid slds-gutters">
    <div class="slds-col">
        
        <div style="padding: 1rem;">
            <div class="slds-align_Left" style="text-align: center; width: 400px; background-color: rgb(255, 255, 255);">
                <div class="slds-border_top">Signature</div>
            </div>
        </div>
    </div>
    <div class="slds-col">
        
        <div style="padding: 1rem;">
            <div class="slds-align_absolute-center" style="text-align: center; width: 400px; background-color: rgb(255, 255, 255);">
                <div class="slds-border_top" style="width: 200px">Date</div>
            </div>
        </div>
    </div>
    <div class="slds-col">
        
        <Div class="slds-scope" style="float:Right;margin-right: 300px;">
            <div class="slds-box" Style="height:80px;width:250px;">
                Area Code and Telephone Number
            </div>
        </Div>
    </div>
</div>
<br></br><br></br>
<div class="slds-text-heading_medium"><b>Response</b></div>

</span>
</div>
</div>
    </div>

<br></br>




  <!-- / REQUIRED SLDS WRAPPER -->
</body>
</apex:page>

 
Hello,

I am trying to move a <div class="slds-box"> and its heading to the center of my page. Currently it is floating to the right but when i try to float center, the box widens to the whole width of the page rather than wrapping around just the text. Also, I am having trouble having the To: appear next to the box rather than on top of it.

User-added image

Basically, i need the To and From boxes and labels to mimic this document as close as possible.

User-added image

Below is my code, Thank you in advance!
 
<apex:page standardcontroller="X2067__c" showHeader="false" standardStylesheets="false" sidebar="false" applyHtmlTag="false" applyBodyTag="false" docType="html-5.0">
<head>
  <!-- Import the Design System style sheet -->
  <apex:slds />
</head>
    <body class="slds-scope">        
        <div class="slds-grid slds-grid_vertical-align-end slds-grid_align-spread" style="height:100px">
            <div class="slds-col slds-p-horizontal_medium">
                <span><apex:image url="/servlet/servlet.FileDownload?file=0152F0000000YbI" width="256" height="150"/> </span>
            </div>
            <div class="slds-col slds-text-heading_large slds-text-align_center">
                <span>Case Information</span>
            </div>
            <div class="slds-col slds-p-horizontal_medium slds-text-heading_medium slds-text-align_right">
                <span>Form 2068<br></br>December 2012-E</span>
        </div>        
    </div>
 <Div class="slds-scope" style="float:Right;">
    <div class="slds-scope slds-text-heading--label slds-m-bottom--small">
    <p class="slds-text-heading--label slds-m-bottom--small"> <br></br>
      From:  
        </p>
<div class="slds-box">
        Alex Waddell<br/>
    	1234 West East Street Tempe, AZ 85281
  </div>
</Div>
  </div>
    <br></br>
  <!-- REQUIRED SLDS WRAPPER -->
  <div class="slds-scope" style="float:Left; position:absolute; width:100%">
    <!-- MASTHEAD -->

    <p class="slds-text-heading--label slds-m-bottom--small">
      To:  
        </p>
         <div class="slds-box" style="float:Left">
         <apex:outputField value="{!X2067__c.Payer_Name__c}"/><br/>
    	<apex:outputField value="{!X2067__c.Payer_Fax_Number__c}"/>
</div>

      <br></br>  <br></br>  <br></br>
    <div class="slds-scope" style="float:Left; position:absolute; width:100%">  
      <br></br>  <br></br>  <br></br>
<table class="slds-table slds-table_bordered slds-table_cell-buffer">
  <thead>
    <tr class="slds-text-title_caps">
      <th scope="col">
        <div class="slds-truncate" title="Case Name">Case Name</div>
      </th>
      <th scope="col">
        <div class="slds-truncate" title="Category 1">Category</div>
      </th>
      <th scope="col">
        <div class="slds-truncate" title="Case Number 1">Case Number</div>
      </th>
      <th scope="col">
        <div class="slds-truncate" title="Category 2">Category</div>
      </th>
      <th scope="col">
        <div class="slds-truncate" title="Case Number 2">Case Number</div>
      </th>
    </tr>
  </thead>
    <tbody>
    <tr>
      <td scope="row" data-label="Case Name">
        <div class="slds-truncate" title="Current Case Name">{!x2067__c.Case_Name__c}</div>
      </td>
      <td scope="row" data-label="Category 1">
        <div class="slds-truncate" title="Category 1">PERS</div>
      </td>
        <td scope="row" data-label="Case Number 1">
        <div class="slds-truncate" title="Case Number 1">1234567</div>
      </td>
      <td scope="row" data-label="Category 2">
        <div class="slds-truncate" title="Category 2"></div>
      </td>
        <td scope="row" data-label="Case Number 2">
        <div class="slds-truncate" title="Case Number 2"></div>
      </td>
        </tr>
  </tbody>
</table>
<table class="slds-table slds-table_bordered slds-table_cell-buffer">
  <thead>
    <tr class="slds-text-title_caps">
      <th scope="col">
        <div class="slds-truncate" title="Current Address">Adress(Street, City, Zip Code)</div>
      </th>
      <th scope="col">
        <div class="slds-truncate" title="Category 1">Area Code and Telephone No</div>
      </th>
    </tr>
  </thead>
    <tbody>
    <tr>
      <td scope="row" data-label="Current Address">
        <div class="slds-truncate" title="Current Adress">{!x2067__c.Service_User_Address__c}</div>
      </td>
        <td scope="row" data-label="Area Code and Telephone No">
        <div class="slds-truncate" title="Area Code and Telephone No">(480)7205699</div>
      </td>
        </tr>
  </tbody>
</table>
    <br></br><br></br>

<div class="slds-grid">
  <div class="slds-col"> 
    <div class="slds-form-element">
  <div class="slds-form-element__control">
    <span class="slds-checkbox">
      <input type="checkbox" name="Absent Parent" id="Absent Parent" value="off" />
      <label class="slds-checkbox__label" for="Absent Parent">
        <span class="slds-checkbox_faux"></span>
        <span class="slds-form-element__label">Absent Parent</span>
      </label>
    </span>
  </div>
</div>
    </div>
  <div class="slds-col"> <div class="slds-form-element">
  <div class="slds-form-element__control">
    <span class="slds-checkbox">
        <input type="checkbox" name="Change in Adress/Telephone" id="Change in Adress/Telephone" value="Off" />
      <label class="slds-checkbox__label" for="Change in Adress/Telephone">
        <span class="slds-checkbox_faux"></span>
        <span class="slds-form-element__label">Change in Adress/Telephone</span>
      </label>
    </span>
  </div>
</div> </div>
      <div class="slds-col"> <div class="slds-form-element">
  <div class="slds-form-element__control">
    <span class="slds-checkbox">
      <input type="checkbox" name="Change in Circumstances" id="Change in Circumstances" value="off" />
      <label class="slds-checkbox__label" for="Change in Circumstances">
        <span class="slds-checkbox_faux"></span>
        <span class="slds-form-element__label">Change in Circumstances</span>
      </label>
    </span>
  </div>
</div> </div>
      <div class="slds-col"> <div class="slds-form-element">
  <div class="slds-form-element__control">
    <span class="slds-checkbox">
      <input type="checkbox" name="Child Care" id="Child Care" value="off" />
      <label class="slds-checkbox__label" for="Child Care">
        <span class="slds-checkbox_faux"></span>
        <span class="slds-form-element__label">Child Care</span>
      </label>
    </span>
  </div>
</div> </div>
      <div class="slds-col"> <div class="slds-form-element">
  <div class="slds-form-element__control">
    <span class="slds-checkbox">
      <input type="checkbox" name="Community Placement Resources" id="Community Placement Resources" value="off" />
      <label class="slds-checkbox__label" for="Community Placement Resources">
        <span class="slds-checkbox_faux"></span>
        <span class="slds-form-element__label">Community Placement Resources</span>
      </label>
    </span>
  </div>
</div> </div>
</div>
<br></br>
<div class="slds-grid">
  <div class="slds-col"> 
    <div class="slds-form-element">
  <div class="slds-form-element__control">
    <span class="slds-checkbox">
      <input type="checkbox" name="Deductions" id="Deductions" value="off" />
      <label class="slds-checkbox__label" for="Deductions">
        <span class="slds-checkbox_faux"></span>
        <span class="slds-form-element__label">Deductions</span>
      </label>
    </span>
  </div>
</div>
    </div>
  <div class="slds-col"> <div class="slds-form-element">
  <div class="slds-form-element__control">
    <span class="slds-checkbox">
        <input type="checkbox" name="Employment Services" id="Employment Services" value="Off" />
      <label class="slds-checkbox__label" for="Employment Services">
        <span class="slds-checkbox_faux"></span>
        <span class="slds-form-element__label">Employment Services</span>
      </label>
    </span>
  </div>
</div> </div>
      <div class="slds-col"> <div class="slds-form-element">
  <div class="slds-form-element__control">
    <span class="slds-checkbox">
      <input type="checkbox" name="EPSDT" id="EPSDT" value="off" />
      <label class="slds-checkbox__label" for="EPSDT">
        <span class="slds-checkbox_faux"></span>
        <span class="slds-form-element__label">EPSDT</span>
      </label>
    </span>
  </div>
</div> </div>
      <div class="slds-col"> <div class="slds-form-element">
  <div class="slds-form-element__control">
    <span class="slds-checkbox">
      <input type="checkbox" name="Family Health Services Nurse" id="Family Health Services Nurse" value="off" />
      <label class="slds-checkbox__label" for="Family Health Services Nurse">
        <span class="slds-checkbox_faux"></span>
        <span class="slds-form-element__label">Family Health Services Nurse</span>
      </label>
    </span>
  </div>
</div> </div>
      <div class="slds-col"> <div class="slds-form-element">
  <div class="slds-form-element__control">
    <span class="slds-checkbox">
      <input type="checkbox" name="Family Planning" id="Family Planning" value="off" />
      <label class="slds-checkbox__label" for="Family Planning">
        <span class="slds-checkbox_faux"></span>
        <span class="slds-form-element__label">Family Planning</span>
      </label>
    </span>
  </div>
</div> </div>
</div>
<br></br>
<div class="slds-grid">
  <div class="slds-col"> 
    <div class="slds-form-element">
  <div class="slds-form-element__control">
    <span class="slds-checkbox">
      <input type="checkbox" name="Household Composition" id="Household Composition" value="off" />
      <label class="slds-checkbox__label" for="Household Composition">
        <span class="slds-checkbox_faux"></span>
        <span class="slds-form-element__label">Household Composition</span>
      </label>
    </span>
  </div>
</div>
    </div>
  <div class="slds-col"> <div class="slds-form-element">
  <div class="slds-form-element__control">
    <span class="slds-checkbox">
        <input type="checkbox" name="Income" id="Income" value="Off" />
      <label class="slds-checkbox__label" for="Income">
        <span class="slds-checkbox_faux"></span>
        <span class="slds-form-element__label">Income</span>
      </label>
    </span>
  </div>
</div> </div>
      <div class="slds-col"> <div class="slds-form-element">
  <div class="slds-form-element__control">
    <span class="slds-checkbox">
      <input type="checkbox" name="LTSS Information Shared" id="LTSS Information Shared" value="off" />
      <label class="slds-checkbox__label" for="LTSS Information Shared">
        <span class="slds-checkbox_faux"></span>
        <span class="slds-form-element__label">LTSS Information Shared</span>
      </label>
    </span>
  </div>
</div> </div>
      <div class="slds-col"> <div class="slds-form-element">
  <div class="slds-form-element__control">
    <span class="slds-checkbox">
      <input type="checkbox" name="Medicaid" id="Medicaid" value="off" />
      <label class="slds-checkbox__label" for="Medicaid">
        <span class="slds-checkbox_faux"></span>
        <span class="slds-form-element__label">Medicaid</span>
      </label>
    </span>
  </div>
</div> </div>
      <div class="slds-col"> <div class="slds-form-element">
  <div class="slds-form-element__control">
    <span class="slds-checkbox">
      <input type="checkbox" name="Medical/Disability" id="Medical/Disability" value="off" />
      <label class="slds-checkbox__label" for="Medical/Disability">
        <span class="slds-checkbox_faux"></span>
        <span class="slds-form-element__label">Medical/Disability</span>
      </label>
    </span>
  </div>
</div> </div>
</div>
<br></br>
<div class="slds-grid">
  <div class="slds-col"> 
    <div class="slds-form-element">
  <div class="slds-form-element__control">
    <span class="slds-checkbox">
      <input type="checkbox" name="MERP Shared" id="MERP Shared" value="off" />
      <label class="slds-checkbox__label" for="MERP Shared">
        <span class="slds-checkbox_faux"></span>
        <span class="slds-form-element__label">MERP Shared</span>
      </label>
    </span>
  </div>
</div>
    </div>
  <div class="slds-col"> <div class="slds-form-element">
  <div class="slds-form-element__control">
    <span class="slds-checkbox">
        <input type="checkbox" name="Nursing Care/Level of Care" id="Nursing Care/Level of Care" value="Off" />
      <label class="slds-checkbox__label" for="Nursing Care/Level of Care">
        <span class="slds-checkbox_faux"></span>
        <span class="slds-form-element__label">Nursing Care/Level of Care</span>
      </label>
    </span>
  </div>
</div> </div>
      <div class="slds-col"> <div class="slds-form-element">
  <div class="slds-form-element__control">
    <span class="slds-checkbox">
      <input type="checkbox" name="Protective Services" id="Protective Services" value="off" />
      <label class="slds-checkbox__label" for="Protective Services">
        <span class="slds-checkbox_faux"></span>
        <span class="slds-form-element__label">Protective Services</span>
      </label>
    </span>
  </div>
</div> </div>
      <div class="slds-col"> <div class="slds-form-element">
  <div class="slds-form-element__control">
    <span class="slds-checkbox">
      <input type="checkbox" name="Refugee Services" id="Refugee Services" value="off" />
      <label class="slds-checkbox__label" for="Refugee Services">
        <span class="slds-checkbox_faux"></span>
        <span class="slds-form-element__label">Refugee Services</span>
      </label>
    </span>
  </div>
</div> </div>
      <div class="slds-col"> <div class="slds-form-element">
  <div class="slds-form-element__control">
    <span class="slds-checkbox">
      <input type="checkbox" name="Resources" id="Resources" value="off" />
      <label class="slds-checkbox__label" for="Resources">
        <span class="slds-checkbox_faux"></span>
        <span class="slds-form-element__label">Resources</span>
      </label>
    </span>
  </div>
</div> </div>
</div>
<br></br>
<div class="slds-grid">
  <div class="slds-col"> 
    <div class="slds-form-element">
  <div class="slds-form-element__control">
    <span class="slds-checkbox">
      <input type="checkbox" name="Support Services" id="Support Services" value="off" />
      <label class="slds-checkbox__label" for="Support Services">
        <span class="slds-checkbox_faux"></span>
        <span class="slds-form-element__label">Support Services</span>
      </label>
    </span>
  </div>
</div>
    </div>
  <div class="slds-col"> <div class="slds-form-element">
  <div class="slds-form-element__control">
    <span class="slds-checkbox">
        <input type="checkbox" name="TANF" id="TANF" value="Off" />
      <label class="slds-checkbox__label" for="TANF">
        <span class="slds-checkbox_faux"></span>
        <span class="slds-form-element__label">TANF</span>
      </label>
    </span>
  </div>
</div> </div>
 <div class="slds-col"> 
<apex:outputField label="Other" Value="{!X2067__c.Other__c}"/>
          <apex:outputLabel >Other: </apex:outputLabel> 
    <apex:outputField label="Reason for 2067" value="{!X2067__c.Reason_for_2067__c}"/> 
    </div>
     <div class="slds-col"> 

    </div>
</div>
<br></br>

<div>
    <span>
        <apex:outputLabel >Comments/Response: </apex:outputLabel> <br></br>
    <apex:outputField label="Comments/Response" value="{!X2067__c.Comment_Response__c}"/>
</span>
</div>
</div>
    </div>

<br></br>


  <!-- / REQUIRED SLDS WRAPPER -->
</body>
</apex:page>

 
Hello,

My VF page is currently stretching my tables to fit 100% width of the page, which is good but now depending on how many characters are in each column, they all end up in different spaces. As shown below

User-added image

Below is my code... Any ideas on how I can make them line up like in the first row?
 
<apex:page standardcontroller="X2067__c" showHeader="false" standardStylesheets="false" sidebar="false" applyHtmlTag="false" applyBodyTag="false" docType="html-5.0">
<head>
  <!-- Import the Design System style sheet -->
  <apex:slds />
</head>
    <body class="slds-scope">        
        <div class="slds-grid slds-grid_vertical-align-end slds-grid_align-spread" style="height:100px">
            <div class="slds-col slds-p-horizontal_medium">
                <span><apex:image url="/servlet/servlet.FileDownload?file=0152F0000000YbI" width="256" height="150"/> </span>
            </div>
            <div class="slds-col slds-text-heading_large slds-text-align_center">
                <span>Case Information</span>
            </div>
            <div class="slds-col slds-p-horizontal_medium slds-text-heading_medium slds-text-align_right">
                <span>Form 2068<br></br>December 2012-E</span>
        </div>        
    </div>

  <!-- REQUIRED SLDS WRAPPER -->
  <div class="slds-scope" style="float:Left; position:absolute; width:100%">
    <!-- MASTHEAD -->
      <br></br>
    <p class="slds-text-heading--label slds-m-bottom--small">
      To:  
        </p>
        <apex:outputField value="{!X2067__c.Payer_Name__c}"/><br/>
    	<apex:outputField value="{!X2067__c.Payer_Fax_Number__c}"/>
      <br></br>  <br></br>  <br></br>
    <div class="slds-scope" style="float:Left; position:absolute; width:100%">  
<table class="slds-table slds-table_bordered slds-table_cell-buffer">
  <thead>
    <tr class="slds-text-title_caps">
      <th scope="col">
        <div class="slds-truncate" title="Case Name">Case Name</div>
      </th>
      <th scope="col">
        <div class="slds-truncate" title="Category 1">Category</div>
      </th>
      <th scope="col">
        <div class="slds-truncate" title="Case Number 1">Case Number</div>
      </th>
      <th scope="col">
        <div class="slds-truncate" title="Category 2">Category</div>
      </th>
      <th scope="col">
        <div class="slds-truncate" title="Case Number 2">Case Number</div>
      </th>
    </tr>
  </thead>
    <tbody>
    <tr>
      <td scope="row" data-label="Case Name">
        <div class="slds-truncate" title="Current Case Name">{!x2067__c.Case_Name__c}</div>
      </td>
      <td scope="row" data-label="Category 1">
        <div class="slds-truncate" title="Category 1">PERS</div>
      </td>
        <td scope="row" data-label="Case Number 1">
        <div class="slds-truncate" title="Case Number 1">1234567</div>
      </td>
      <td scope="row" data-label="Category 2">
        <div class="slds-truncate" title="Category 2"></div>
      </td>
        <td scope="row" data-label="Case Number 2">
        <div class="slds-truncate" title="Case Number 2"></div>
      </td>
        </tr>
  </tbody>
</table>
<table class="slds-table slds-table_bordered slds-table_cell-buffer">
  <thead>
    <tr class="slds-text-title_caps">
      <th scope="col">
        <div class="slds-truncate" title="Current Address">Adress(Street, City, Zip Code)</div>
      </th>
      <th scope="col">
        <div class="slds-truncate" title="Category 1">Area Code and Telephone No</div>
      </th>
    </tr>
  </thead>
    <tbody>
    <tr>
      <td scope="row" data-label="Current Address">
        <div class="slds-truncate" title="Current Adress">{!x2067__c.Service_User_Address__c}</div>
      </td>
        <td scope="row" data-label="Area Code and Telephone No">
        <div class="slds-truncate" title="Area Code and Telephone No">(480)7205699</div>
      </td>
        </tr>
  </tbody>
</table>
    <br></br><br></br>

<div class="slds-grid">
  <div class="slds-col"> 
    <div class="slds-form-element">
  <div class="slds-form-element__control">
    <span class="slds-checkbox">
      <input type="checkbox" name="Absent Parent" id="Absent Parent" value="off" />
      <label class="slds-checkbox__label" for="Absent Parent">
        <span class="slds-checkbox_faux"></span>
        <span class="slds-form-element__label">Absent Parent</span>
      </label>
    </span>
  </div>
</div>
    </div>
  <div class="slds-col"> <div class="slds-form-element">
  <div class="slds-form-element__control">
    <span class="slds-checkbox">
        <input type="checkbox" name="Change in Adress/Telephone" id="Change in Adress/Telephone" value="Off" />
      <label class="slds-checkbox__label" for="Change in Adress/Telephone">
        <span class="slds-checkbox_faux"></span>
        <span class="slds-form-element__label">Change in Adress/Telephone</span>
      </label>
    </span>
  </div>
</div> </div>
      <div class="slds-col"> <div class="slds-form-element">
  <div class="slds-form-element__control">
    <span class="slds-checkbox">
      <input type="checkbox" name="Change in Circumstances" id="Change in Circumstances" value="off" />
      <label class="slds-checkbox__label" for="Change in Circumstances">
        <span class="slds-checkbox_faux"></span>
        <span class="slds-form-element__label">Change in Circumstances</span>
      </label>
    </span>
  </div>
</div> </div>
      <div class="slds-col"> <div class="slds-form-element">
  <div class="slds-form-element__control">
    <span class="slds-checkbox">
      <input type="checkbox" name="Child Care" id="Child Care" value="off" />
      <label class="slds-checkbox__label" for="Child Care">
        <span class="slds-checkbox_faux"></span>
        <span class="slds-form-element__label">Child Care</span>
      </label>
    </span>
  </div>
</div> </div>
      <div class="slds-col"> <div class="slds-form-element">
  <div class="slds-form-element__control">
    <span class="slds-checkbox">
      <input type="checkbox" name="Community Placement Resources" id="Community Placement Resources" value="off" />
      <label class="slds-checkbox__label" for="Community Placement Resources">
        <span class="slds-checkbox_faux"></span>
        <span class="slds-form-element__label">Community Placement Resources</span>
      </label>
    </span>
  </div>
</div> </div>
</div>
<br></br>
<div class="slds-grid">
  <div class="slds-col"> 
    <div class="slds-form-element">
  <div class="slds-form-element__control">
    <span class="slds-checkbox">
      <input type="checkbox" name="Deductions" id="Deductions" value="off" />
      <label class="slds-checkbox__label" for="Deductions">
        <span class="slds-checkbox_faux"></span>
        <span class="slds-form-element__label">Deductions</span>
      </label>
    </span>
  </div>
</div>
    </div>
  <div class="slds-col"> <div class="slds-form-element">
  <div class="slds-form-element__control">
    <span class="slds-checkbox">
        <input type="checkbox" name="Employment Services" id="Employment Services" value="Off" />
      <label class="slds-checkbox__label" for="Employment Services">
        <span class="slds-checkbox_faux"></span>
        <span class="slds-form-element__label">Employment Services</span>
      </label>
    </span>
  </div>
</div> </div>
      <div class="slds-col"> <div class="slds-form-element">
  <div class="slds-form-element__control">
    <span class="slds-checkbox">
      <input type="checkbox" name="EPSDT" id="EPSDT" value="off" />
      <label class="slds-checkbox__label" for="EPSDT">
        <span class="slds-checkbox_faux"></span>
        <span class="slds-form-element__label">EPSDT</span>
      </label>
    </span>
  </div>
</div> </div>
      <div class="slds-col"> <div class="slds-form-element">
  <div class="slds-form-element__control">
    <span class="slds-checkbox">
      <input type="checkbox" name="Family Health Services Nurse" id="Family Health Services Nurse" value="off" />
      <label class="slds-checkbox__label" for="Family Health Services Nurse">
        <span class="slds-checkbox_faux"></span>
        <span class="slds-form-element__label">Family Health Services Nurse</span>
      </label>
    </span>
  </div>
</div> </div>
      <div class="slds-col"> <div class="slds-form-element">
  <div class="slds-form-element__control">
    <span class="slds-checkbox">
      <input type="checkbox" name="Family Planning" id="Family Planning" value="off" />
      <label class="slds-checkbox__label" for="Family Planning">
        <span class="slds-checkbox_faux"></span>
        <span class="slds-form-element__label">Family Planning</span>
      </label>
    </span>
  </div>
</div> </div>
</div>
<br></br>
<div class="slds-grid">
  <div class="slds-col"> 
    <div class="slds-form-element">
  <div class="slds-form-element__control">
    <span class="slds-checkbox">
      <input type="checkbox" name="Household Composition" id="Household Composition" value="off" />
      <label class="slds-checkbox__label" for="Household Composition">
        <span class="slds-checkbox_faux"></span>
        <span class="slds-form-element__label">Household Composition</span>
      </label>
    </span>
  </div>
</div>
    </div>
  <div class="slds-col"> <div class="slds-form-element">
  <div class="slds-form-element__control">
    <span class="slds-checkbox">
        <input type="checkbox" name="Income" id="Income" value="Off" />
      <label class="slds-checkbox__label" for="Income">
        <span class="slds-checkbox_faux"></span>
        <span class="slds-form-element__label">Income</span>
      </label>
    </span>
  </div>
</div> </div>
      <div class="slds-col"> <div class="slds-form-element">
  <div class="slds-form-element__control">
    <span class="slds-checkbox">
      <input type="checkbox" name="LTSS Information Shared" id="LTSS Information Shared" value="off" />
      <label class="slds-checkbox__label" for="LTSS Information Shared">
        <span class="slds-checkbox_faux"></span>
        <span class="slds-form-element__label">LTSS Information Shared</span>
      </label>
    </span>
  </div>
</div> </div>
      <div class="slds-col"> <div class="slds-form-element">
  <div class="slds-form-element__control">
    <span class="slds-checkbox">
      <input type="checkbox" name="Medicaid" id="Medicaid" value="off" />
      <label class="slds-checkbox__label" for="Medicaid">
        <span class="slds-checkbox_faux"></span>
        <span class="slds-form-element__label">Medicaid</span>
      </label>
    </span>
  </div>
</div> </div>
      <div class="slds-col"> <div class="slds-form-element">
  <div class="slds-form-element__control">
    <span class="slds-checkbox">
      <input type="checkbox" name="Medical/Disability" id="Medical/Disability" value="off" />
      <label class="slds-checkbox__label" for="Medical/Disability">
        <span class="slds-checkbox_faux"></span>
        <span class="slds-form-element__label">Medical/Disability</span>
      </label>
    </span>
  </div>
</div> </div>
</div>
<br></br>
<div class="slds-grid">
  <div class="slds-col"> 
    <div class="slds-form-element">
  <div class="slds-form-element__control">
    <span class="slds-checkbox">
      <input type="checkbox" name="MERP Shared" id="MERP Shared" value="off" />
      <label class="slds-checkbox__label" for="MERP Shared">
        <span class="slds-checkbox_faux"></span>
        <span class="slds-form-element__label">MERP Shared</span>
      </label>
    </span>
  </div>
</div>
    </div>
  <div class="slds-col"> <div class="slds-form-element">
  <div class="slds-form-element__control">
    <span class="slds-checkbox">
        <input type="checkbox" name="Nursing Care/Level of Care" id="Nursing Care/Level of Care" value="Off" />
      <label class="slds-checkbox__label" for="Nursing Care/Level of Care">
        <span class="slds-checkbox_faux"></span>
        <span class="slds-form-element__label">Nursing Care/Level of Care</span>
      </label>
    </span>
  </div>
</div> </div>
      <div class="slds-col"> <div class="slds-form-element">
  <div class="slds-form-element__control">
    <span class="slds-checkbox">
      <input type="checkbox" name="Protective Services" id="Protective Services" value="off" />
      <label class="slds-checkbox__label" for="Protective Services">
        <span class="slds-checkbox_faux"></span>
        <span class="slds-form-element__label">Protective Services</span>
      </label>
    </span>
  </div>
</div> </div>
      <div class="slds-col"> <div class="slds-form-element">
  <div class="slds-form-element__control">
    <span class="slds-checkbox">
      <input type="checkbox" name="Refugee Services" id="Refugee Services" value="off" />
      <label class="slds-checkbox__label" for="Refugee Services">
        <span class="slds-checkbox_faux"></span>
        <span class="slds-form-element__label">Refugee Services</span>
      </label>
    </span>
  </div>
</div> </div>
      <div class="slds-col"> <div class="slds-form-element">
  <div class="slds-form-element__control">
    <span class="slds-checkbox">
      <input type="checkbox" name="Resources" id="Resources" value="off" />
      <label class="slds-checkbox__label" for="Resources">
        <span class="slds-checkbox_faux"></span>
        <span class="slds-form-element__label">Resources</span>
      </label>
    </span>
  </div>
</div> </div>
</div>
<br></br>
<div class="slds-grid">
  <div class="slds-col"> 
    <div class="slds-form-element">
  <div class="slds-form-element__control">
    <span class="slds-checkbox">
      <input type="checkbox" name="Support Services" id="Support Services" value="off" />
      <label class="slds-checkbox__label" for="Support Services">
        <span class="slds-checkbox_faux"></span>
        <span class="slds-form-element__label">Support Services</span>
      </label>
    </span>
  </div>
</div>
    </div>
  <div class="slds-col"> <div class="slds-form-element">
  <div class="slds-form-element__control">
    <span class="slds-checkbox">
        <input type="checkbox" name="TANF" id="TANF" value="Off" />
      <label class="slds-checkbox__label" for="TANF">
        <span class="slds-checkbox_faux"></span>
        <span class="slds-form-element__label">TANF</span>
      </label>
    </span>
  </div>
</div> </div>
 <div class="slds-col"> 
<apex:outputField label="Other" Value="{!x2067__c.Other__c}"/>
          <apex:outputLabel>Other: </apex:outputLabel> 
    <apex:outputField  label="Reason for 2067" value="{!X2067__c.Reason_for_2067__c}"/> 
    </div>
     <div class="slds-col"> 

    </div>
</div>
<br></br>

<div>
    <span>
        <apex:outputLabel>Comments/Response: </apex:outputLabel> <br></br>
    <apex:outputField  label="Comments/Response" value="{!X2067__c.Comment_Response__c}"/>
</span>
</div>
</div>
    </div>
    <div class="slds-scope" style="float:Right;">
    <p class="slds-text-heading--label slds-m-bottom--small"> <br></br>
      From:  
        </p>
        Alex Waddell<br/>
    	1234 West East Street Tempe, AZ 85281

  </div>
<br></br>


  <!-- / REQUIRED SLDS WRAPPER -->
</body>
</apex:page>

 
Hello,

I currently have a Data table that is only taking up half the width of the page. I was wondering how I can extend the width of the table to cover the full width of the vf page

I have tried to add the "slds-size--1-of-1" to the table class but either that is wrong or i am doing something wrong

Below is a photo of the table(s) and my code 

User-added image
 
<apex:page standardcontroller="X2067__c" showHeader="false" standardStylesheets="false" sidebar="false" applyHtmlTag="false" applyBodyTag="false" docType="html-5.0">
<head>
  <!-- Import the Design System style sheet -->
  <apex:slds />
</head>
    <body class="slds-scope">        
        <div class="slds-grid slds-grid_vertical-align-end slds-grid_align-spread" style="height:100px">
            <div class="slds-col slds-p-horizontal_medium">
                <span><apex:image url="/servlet/servlet.FileDownload?file=0152F0000000YbI" width="256" height="150"/> </span>
            </div>
            <div class="slds-col slds-text-heading_large slds-text-align_center">
                <span>Case Information</span>
            </div>
            <div class="slds-col slds-p-horizontal_medium slds-text-heading_medium slds-text-align_right">
                <span>Form 2068<br></br>December 2012-E</span>
        </div>        
    </div>

  <!-- REQUIRED SLDS WRAPPER -->
  <div class="slds-scope" style="float:Left; position:absolute;">
    <!-- MASTHEAD -->
      <br></br>
    <p class="slds-text-heading--label slds-m-bottom--small">
      To:  
        </p>
        <apex:outputField value="{!X2067__c.Payer_Name__c}"/><br/>
    	<apex:outputField value="{!X2067__c.Payer_Fax_Number__c}"/>
      <br></br>  <br></br>  <br></br>
    <div class="slds-scope" style="float:Left; position:absolute;">  
<table class="slds-table slds-table_bordered slds-table_cell-buffer">
  <thead>
    <tr class="slds-text-title_caps">
      <th scope="col">
        <div class="slds-truncate" title="Case Name">Case Name</div>
      </th>
      <th scope="col">
        <div class="slds-truncate" title="Category 1">Category</div>
      </th>
      <th scope="col">
        <div class="slds-truncate" title="Case Number 1">Case Number</div>
      </th>
      <th scope="col">
        <div class="slds-truncate" title="Category 2">Category</div>
      </th>
      <th scope="col">
        <div class="slds-truncate" title="Case Number 2">Case Number</div>
      </th>
    </tr>
  </thead>
    <tbody>
    <tr>
      <td scope="row" data-label="Case Name">
        <div class="slds-truncate" title="Current Case Name"><a>{!x2067__c.Case_Name__c}</a></div>
      </td>
      <td scope="row" data-label="Category 1">
        <div class="slds-truncate" title="Category 1"><a>PERS</a></div>
      </td>
        <td scope="row" data-label="Case Number 1">
        <div class="slds-truncate" title="Case Number 1"><a>1234567</a></div>
      </td>
      <td scope="row" data-label="Category 2">
        <div class="slds-truncate" title="Category 2"><a></a></div>
      </td>
        <td scope="row" data-label="Case Number 2">
        <div class="slds-truncate" title="Case Number 2"><a></a></div>
      </td>
        </tr>
  </tbody>
</table>
<table class="slds-table slds-table_bordered slds-table_cell-buffer">
  <thead>
    <tr class="slds-text-title_caps">
      <th scope="col">
        <div class="slds-truncate" title="Current Address">Adress(Street, City, Zip Code)</div>
      </th>
      <th scope="col">
        <div class="slds-truncate" title="Category 1">Area Code and Telephone No</div>
      </th>
    </tr>
  </thead>
    <tbody>
    <tr>
      <td scope="row" data-label="Current Address">
        <div class="slds-truncate" title="Current Adress"><a>{!x2067__c.Service_User_Address__c}</a></div>
      </td>
        <td scope="row" data-label="Area Code and Telephone No">
        <div class="slds-truncate" title="Area Code and Telephone No"><a>(480)7205699</a></div>
      </td>
        </tr>
  </tbody>
</table>



</div>
    </div>
    <div class="slds-scope" style="float:Right;">
    <p class="slds-text-heading--label slds-m-bottom--small"> <br></br>
      From:  
        </p>
        Alex Waddell<br/>
    	1234 West East Street Tempe, AZ 85281

  </div>
<br></br>


  <!-- / REQUIRED SLDS WRAPPER -->
</body>
</apex:page>



 
Hello,

Can anyone help me adjust my code so that the three pieces circled in red all align? Though they are all 3 aligning to their respective Left, Right, and Center positions, they are still rendering one on top of the other. Any ideas?
User-added image

Below is my code
 
<apex:page standardcontroller="X2067__c" showHeader="false" standardStylesheets="false" sidebar="false" applyHtmlTag="false" applyBodyTag="false" docType="html-5.0">
<head>
  <!-- Import the Design System style sheet -->
  <apex:slds />
</head>
<body>
   <Div>
<h2 style="Text-align: Center; Position:Relative;">
        Case Information
    </h2>
 <h3 style="Text-align: right; Position:Relative;">
     Form 2067<br></br>
     December 2012-E  
    </h3>      
     <apex:image url="/servlet/servlet.FileDownload?file=0152F0000000YbI" width="256" height="100"/>  

    </Div> 

  <!-- REQUIRED SLDS WRAPPER -->
  <div class="slds-scope" style="float:Left; position:absolute;">
    <!-- MASTHEAD -->
      <br></br>
    <p class="slds-text-heading--label slds-m-bottom--small">
      To:  
        </p>
        <apex:outputField value="{!X2067__c.Payer_Name__c}"/><br/>
        <apex:outputField value="{!X2067__c.Payer_Fax_Number__c}"/>
    </div>
    <div class="slds-scope" style="float:Right;">
    <p class="slds-text-heading--label slds-m-bottom--small"> <br></br>
      From:  
        </p>
        Alex Waddell<br/>
        1234 West East Street Tempe, AZ 85281
  </div>
  <!-- / REQUIRED SLDS WRAPPER -->
</body>
</apex:page>