CSS-BASED TABLE STARTER

http://www.digital-web.com/articles/everything_you_know_about_CSS_Is_wrong/

by Reusablecode

HTML

<div class="grid-address"> 
  <div class="row"> 
    <div class="cell"> 
      <img src="http:\\convergeclientsolutions.com\vitalpet\images\vitalpetImages\vitalpet_logo_new_177x60.png"/> 
      <p>A lily in the gardens of The Vyne Country House</p> 
    </div> 
    <div class="cell"> 
      <img src="cells/photo3.jpg" alt="A Fuchsia plant" /> 
      <p>Fuchsia plant in my garden</p> 
    </div> 
  </div> 
  <div class="row"> 
    <div class="cell"> 

      <p>A crazy looking flower</p>
    </div>
    <div class="cell">
      <img src="cells/photo4.jpg" alt="A Robin sitting on a fence" />
      <p>
        This robin has been visiting our garden over the summer. 
        He is very friendly and doesn't seem to be too worried about sharing the garden with us.
      </p>
    </div>
  </div>
     
     
     
     
             <apex:pageBlockSection showHeader="false" columns="2">
            <apex:outputField styleClass="left" value="{!rxw_Record__c.Name}"/>
            <apex:outputField styleClass="right" value="{!rxw_Record__c.NumberofActivePatients__c}"/>
        </apex:pageBlockSection>
        
        <apex:pageBlockSection showHeader="true" title="rxwRecord Pet (Patient) Info" columns="2">
            <apex:outputField value="{!rxw_Record__c.Pet_First_Name__c}"/>
            <apex:pageBlockSectionItem />
            <apex:outputField value="{!rxw_Record__c.Pet_Species__c}"/>
            <apex:outputField value="{!rxw_Record__c.VCARE_DateLast_Reminder__c}"/>
            <apex:outputField value="{!rxw_Record__c.Pet_Breed__c}"/>
            <apex:outputField value="{!rxw_Record__c.VCARE_DateLast_Consult__c}"/>
            <apex:outputField value="{!rxw_Record__c.Pet_Color__c}"/>
            <apex:pageBlockSectionItem />
            <apex:outputField value="{!rxw_Record__c.Pet_Gender__c}"/>
            <apex:pageBlockSectionItem />
            <apex:outputField value="{!rxw_Record__c.Pet_Age__c}"/>
            <apex:pageBlockSectionItem />
           ...

CSS

body {overflow:visible;}
.grid-address { display: table;  border-spacing: 4px; } 

.row { display: table-row; } 

.cell { 
  display: table-cell; 
  width: 240px; 
  text-align:left;
  vertical-align:center;
  padding:4px 4px;
  border:1px solid #999;
  background:#ffc;
} 
.image p { 
  color: #fff; 
  font-size: 85%; 
  text-align: left;
  padding-top: 8px;
}


/**** page grid ****/
.grid-page{ display: table; width:8.5in;height:11in; } 

.coupon img { display:table-cell; width:4.25in; }

.page-break { page-break-before:always; }