Formatting problem.

I have a page where I want to display an image at the top, a scrollable panel in the middle, and a button at the bottom. I get all of these components, but they are all inside of the scroll panel and I don't understand why.

Here is the code:

<f:view>
        <html lang="en-US" xml:lang="en-US">
            <head>
                <meta content="no-cache" http-equiv="Cache-Control"/>
                <meta content="no-cache" http-equiv="Pragma"/>
                <title>DisplayDiagnosis Title</title>
                <link href="resources/stylesheet.css" rel="stylesheet" type="text/css"/>
            </head>
            <body style="-rave-layout: grid">
                <h:form binding="#{DisplayDiagnosis.form1}" id="form1">
                    <h:panelGrid binding="#{DisplayDiagnosis.centeringGridPanel}" columns="1" id="centeringGridPanel">
                        <h:graphicImage binding="#{DisplayDiagnosis.image1}" id="image1" value="resources/myLogo.JPG"/>
                        <h:panelGrid binding="#{DisplayDiagnosis.diagnosisPanel}" columns="3" footerClass="" id="diagnosisPanel">
                            <div style="height: 250px; width: 400px; overflow: auto">
                            </div>
                        </h:panelGrid>
                        <h:panelGroup binding="#{DisplayDiagnosis.groupPanel1}" id="groupPanel1" style="height: 50px; width: 100px">
                            <h:commandButton binding="#{DisplayDiagnosis.button1}" id="button1" onclic="history.back(); return false" value="Back"/>
                        </h:panelGroup>
                    </h:panelGrid>
                </h:form>
            </body>
        </html>
    </f:view>

How should this look in order to get the image above the scroll panel and the button below it?

Note that I tried surrounding the DiagnosisPanel (the only one I want to scroll) with the div tag, but that didn't do what I expected.

In short, how do I get the DiagnosisPanel to be the only thing that scrolls?

Thanks.
[ October 07, 2005: Message edited by: Darrin Smith ]

Where are the f and h custom actions from?

Originally posted by Bear Bibeault:
Where are the f and h custom actions from?

Oh, sorry...that is JSF stuff (using Java Studio Creator), but I figured this really wasn't a JSF question, but rather a simple JSP one since you all deal with this sort of thing.

Moved to the JSF forum.

I changed it around a little, and now I get the image to stay at the top, but the button is still inside of the scroll pane. Why this is I have no ideas when the image is correct.

Anyway, here is what it looks like now. Any ideas on how to get the bottom out of the scroll pane?

Did you try using the Facet tags... footer and header?
<h

ataTable id="books"
columnClasses="list-column-center,
list-column-right, list-column-center,
list-column-right" headerClass="list-header"
rowClasses="list-row" styleClass="list-
background" value="#{BookStore.items}" var="store">
<h:column>
<f:facet name="header">
<h

utputText value="#{msg.storeNameLabel}"/>
</f:facet>
<h

utputText value="#{store.name}"/>
</h:column>
<h:column>
<f:facet name="header">
<Subject
</f:facet>
<h

utputText value="#{store.subject}"/>
</h:column>
<h:column>
<f:facet name="header">
<h

utputText value="#{msg.storePriceLabel}"/>
</f:facet>
<h

utputText value="#{store.price}"/>
</h:column>
</h

ataTable>

resource http://www.exadel.com/tutorial/jsf/jsftags-guide.html