panelStretchLayout's "top" and "center" facets overlapping

Question

I'm looking to create a template which resembles the following:

What is actually being rendered:

This is the layout code that I'm using:

<af:panelStretchLayout id="pt_psl1">
    <f:facet name="top">                
        <af:panelGroupLayout id="pgl_top" styleClass="header">
            <div class="logo">
            .
            .
            .
            </div>

            <div class="searchDiv">
            .
            .
            .
            </div>

            <div class="userDiv">
            .
            .
            .
            </div>
        </af:panelGroupLayout>  
    </f:facet>

    <f:facet name="center">
        <af:panelGroupLayout id="pt_pgl2" styleClass="postHeaderDiv">
            <af:panelSplitter id="pt_ps1">
                <f:facet name="first">
                    <h:outputFormat value="outputFormat1" id="pt_of1"/>
                </f:facet>
                <f:facet name="second">
                    <h:outputFormat value="outputFormat2" id="pt_of2"/>
                </f:facet>
            </af:panelSplitter>
        </af:panelGroupLayout>
    </f:facet>
</af:panelStretchLayout>

The problem is that the facet "center" seems to be embedding itself inside the facet "top" and an inline height of 50px along with the overlfow:hidden property is preventing the facet "center" content to be shown on the page.

On further investigation of the rendered HTML, I found the following:

I don't quite understand why my facet "center" content is becomming a child of facet "top" whereas it should have been outside the facet "top" div. Is there anything wrong in my template markup?

Answer 1

I would highly recommend that you use the newer af:panelGridLayout component to design your template.

In your case, you shouldn't be mixing div HTML tags in the layout definition - use just ADF Faces tags. Did you define the height you want to for the center section in the af:panelStretchLayout ?

You also don't need a panelGroupLayout around the splitter.

Answer 2

I had an unclosed div in the "top" facet. Closing it solved the problem.