Center page in browser

Question

We are building an ADF Web Fusion application, and we would like our pages to have a fixed width and be centered in the browser, much like cnn.com or weather.com. On cnn.com and on our company website, this behavior is achieved by placing a div tag just inside the body with the property align set to center. However, I can't find a way to do something like this in adf.
I've seen a few people ask similar questions, but I haven't seen a definitive answer yet. Is this functionality available?
I am using JDeveloper 11.1.2.0.0 and the Integrated WLS 10.3.5 on on Windows 7.

Answer 1

<?xml version='1.0' encoding='UTF-8'?>
<jsp:root xmlns:jsp="http://java.sun.com/JSP/Page" version="2.1" xmlns:f="http://java.sun.com/jsf/core"
          xmlns:af="http://xmlns.oracle.com/adf/faces/rich">
  <jsp:directive.page contentType="text/html;charset=UTF-8"/>
  <f:view>
    <af:document title="pglAtTop" id="d1">
      <af:form id="f1">
        <af:panelGroupLayout id="pgl11" layout="scroll" halign="center" styleClass="AFStretchWidth">
          <af:panelGroupLayout id="pgl12" layout="vertical" halign="center"
                               inlineStyle="background-color:Teal; border-color:Fuchsia; border-style:double;width:976px;">
            <af:panelGroupLayout layout="vertical" id="pgl2" valign="top">
              <af:image source="#{resource['images:service_request_banner.gif']}"
                        shortDesc="Allied Service Requests Header Banner" id="i1"/>
              <af:panelGroupLayout id="pgl4" layout="horizontal" halign="end" valign="bottom">
                <af:goButton id="gb1" destination="http://www.google.com" targetFrame="_blank"
                             textAndAccessKey="&amp;Support"/>
                <af:commandButton text="My Profile" id="commandButton1"/>
                <af:commandButton text="Logout" id="cb4"/>
              </af:panelGroupLayout>
            </af:panelGroupLayout>
            <af:panelHeader text="sample header" id="ph1" type="stretch"
             inlineStyle="width:976px;">
              <f:facet name="context">
                <af:panelGroupLayout id="g1" layout="horizontal" halign="end">
                  <af:spacer width="20" height="10" id="s1"/>
                  <af:selectOneChoice value="sample soc" label="for" id="soc1" autoSubmit="true"/>
                </af:panelGroupLayout>
              </f:facet>
              <f:facet name="menuBar"/>
              <f:facet name="toolbar">
                <af:commandButton text="Back" id="cb1"/>
              </f:facet>
              <f:facet name="legend"/>
              <f:facet name="info"/>
              <af:table var="row" rows="5" fetchSize="5" rowBandingInterval="0" filterVisible="false" varStatus="vs"
                        rowSelection="single" id="t1" rendered="true" columnStretching="column:c3">
                <af:column headerText="" id="c1">
                  <f:facet name="filter">
                    <af:inputDate id="id1">
                      <af:convertDateTime/>
                    </af:inputDate>
                  </f:facet>
                  <af:outputText value="samplerow1" id="ot1"/>
                </af:column>
                <af:column headerText="" id="c3">
                  <af:outputText value="samplerow3" id="ot3"/>
                </af:column>
                <af:column id="c4" width="120" sortable="false" headerText="">
                  <af:panelGroupLayout id="pgl1" layout="horizontal">
                    <af:commandButton text="sample button" id="cb2"/>
                    <af:commandButton text="sample button2" id="cb3"/>
                  </af:panelGroupLayout>
                </af:column>
                <af:column filterable="false" sortable="false" headerText="" id="c2">
                  <f:facet name="filter">
                    <af:inputDate id="id2">
                      <af:convertDateTime/>
                    </af:inputDate>
                  </f:facet>
                  <af:outputText value="samplerow1" id="ot2"/>
                </af:column>
              </af:table>
            </af:panelHeader>
          </af:panelGroupLayout>
        </af:panelGroupLayout>
      </af:form>
    </af:document>
  </f:view>
</jsp:root>This is looking pretty good. It would be perfect if the table would stretch to the bottom of the screen. Is there any way to achieve this? or will I have to specify the height?
Thanks so much for your help so far.