I took some of the pages generated by JBoss Developer Studio Seam application generator.

I wanted to split a page and have 2 panels of content side-by-side. When I group the content with rich:panel tags odd behavior occurs. First, the content appears to extend past the bottom border of the panel. Second, if you add the as the last entry of the rich:panel the content no longer runs past the bottom border, but the header disappears!!

I never thought this would be this difficult. Here is some of the code:

 <rich:panel style="padding:0">
 <f:facet name="header">
 <rich:spacer height="4" />
 </f:facet>

 <h:panelGrid columns="2" columnClasses="panels2">

 <rich:panel>
 <f:facet name="header">
 <h:outputText value="Customer"/>
 </f:facet>

 <s:decorate id="company" template="layout/display.xhtml">
 <ui:define name="label">Company:</ui:define>
 #{customerHome.instance.company}
 </s:decorate>

 <s:decorate id="lastName" template="layout/display.xhtml">
 <ui:define name="label">Last Name:</ui:define>
 #{customerHome.instance.lastName}
 </s:decorate>

 <s:decorate id="firstName" template="layout/display.xhtml">
 <ui:define name="label">First Name:</ui:define>
 #{customerHome.instance.firstName}
 </s:decorate>

 <s:decorate id="address" template="layout/display.xhtml">
 <ui:define name="label">Address:</ui:define>
 #{customerHome.instance.address}
 </s:decorate>

 <s:decorate id="city" template="layout/display.xhtml">
 <ui:define name="label">City:</ui:define>
 #{customerHome.instance.city}
 </s:decorate>

 <s:decorate id="state" template="layout/display.xhtml">
 <ui:define name="label">State:</ui:define>
 #{customerHome.instance.state}
 </s:decorate>

 <s:decorate id="zipCode" template="layout/display.xhtml">
 <ui:define name="label">Zip Code:</ui:define>
 #{customerHome.instance.zipCode}
 </s:decorate>

 <s:decorate id="county" template="layout/display.xhtml">
 <ui:define name="label">County:</ui:define>
 #{customerHome.instance.county}
 </s:decorate>

 </rich:panel>

 <rich:panel>

 <f:facet name="header">Billing</f:facet>

 <s:decorate id="billingAddress" template="layout/display.xhtml">
 <ui:define name="label">Address:</ui:define>
 #{customerHome.instance.billingAddress}
 </s:decorate>

 <s:decorate id="billingCity" template="layout/display.xhtml">
 <ui:define name="label">City:</ui:define>
 #{customerHome.instance.billingCity}
 </s:decorate>

 <s:decorate id="billingState" template="layout/display.xhtml">
 <ui:define name="label">State:</ui:define>
 #{customerHome.instance.billingState}
 </s:decorate>

 <s:decorate id="billingZipCode" template="layout/display.xhtml">
 <ui:define name="label">Zip Code:</ui:define>
 #{customerHome.instance.billingZipCode}
 </s:decorate>

 <s:decorate id="cashOnly" template="layout/display.xhtml">
 <ui:define name="label">Cash Only:</ui:define>
 #{customerHome.instance.cashOnly}
 </s:decorate>

 <s:decorate id="phone" template="layout/display.xhtml">
 <ui:define name="label">Phone:</ui:define>
 #{customerHome.instance.phone}
 </s:decorate>

 <s:decorate id="fax" template="layout/display.xhtml">
 <ui:define name="label">Fax:</ui:define>
 #{customerHome.instance.fax}
 </s:decorate>

 <s:decorate id="township" template="layout/display.xhtml">
 <ui:define name="label">Township:</ui:define>
 #{customerHome.instance.township}
 </s:decorate>

 <s:decorate id="altPhone" template="layout/display.xhtml">
 <ui:define name="label">Alt Phone:</ui:define>
 #{customerHome.instance.altPhone}
 </s:decorate>

 <s:decorate id="cellPhone" template="layout/display.xhtml">
 <ui:define name="label">Cell Phone:</ui:define>
 #{customerHome.instance.cellPhone}
 </s:decorate>

 <s:decorate id="pager" template="layout/display.xhtml">
 <ui:define name="label">Pager:</ui:define>
 #{customerHome.instance.pager}
 </s:decorate>


 </rich:panel>

 </h:panelGrid>

 </rich:panel>