How to control the layout in JSF?

Question

Hi,

I am writing a web application (While learning JSF from scratch, and thanks to this site I was able to do this). I have managed to get pretty far but there is something I can't figure how to approach to. Currently I have this:

Link to full size screenshot

As you can see, I don't know how to place things where I want them. At this point just stacking the buttons (sleep timer and message text) and the input-spinner at the top of each panel would suffice, but I would like to learn how to control this better. (Place each component at a chosen location inside the panel)

The JSP code:

    <h:panelGrid id="ActionsPanel" styleClass="leftcol"
        binding="#{actions.actionPanel}">
    </h:panelGrid>
    <h:panelGrid id="EditPanel" styleClass="rightcol"
        binding="#{actions.editorPanel}">
    </h:panelGrid>

And the CSS:

.leftcol {
    display: block; width : 20%;
    height: 300px;
    float: left;
    border: 1px solid #000;
    width: 20%; height : 300px; float : left; border : 1px solid #000;
    border-top: 0;
}

.rightcol {
    width: 70%;
    height: 300px;
    float: left;
    border: 1px solid #000;
    border-top: 0;
    border-left: 0;
}

Thanks! Ben.

Answer 1

When writing CSS, don't look at JSF source code, but at its generated HTML output. The h:panelGrid renders a HTML table. You need to vertical-align the contents of the table cells td to top.

.leftcol td {
    vertical-align: top;
}
.rightcol td {
    vertical-align: top;
}