How to control the layout in JSF?

Tags: css,jsf

Problem :

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: Screenshot

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"
    <h:panelGrid id="EditPanel" styleClass="rightcol"

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.

Solution :

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;

    CSS Howto..

    How do you style/select inline-block elements in the first row when in a flexible container?

    How to activate jQuery function with img instead of button?

    Not sure how to use css selectors

    How To Highlight Show Active Tab In A Navbar-Fixed-Top

    How to addClass in jQuery to all panels

    How to break CSS inheritance?

    My sidebar is going over the footer. How can I sort this out?

    How is CSS linked to [closed]

    CSS how to fill remaining space (1 div with smaller divs)

    How to group elements based on same specific css attribute using java script or jQuery?

    How to make background image position stay same on all resolutions?

    how to add empty space between cells in tables?

    Bootstrap - How to ensure white space on far left and far right on mobile

    How can I have a 2 column layout with one of the columns with a fixed width and the other with the remaining width?

    How to prevent inheritance of any css style of parent node to child node?

    how to use static folder in django for css and javascript?

    How to use absolute positioning without overlap effect

    How to Test CSS/HTML/jQuery?

    How can I make a split-text input placeholder?

    How to give option to add css classes/IDs to content to in CMS's WYSIWYG content builder/editor to non-technical client?

    How to test CSS selector performance?

    How to trigger self hover on child element

    How to create a set of css rules for safari

    CSS: how to add a down arrow for the active link

    How to correctly impose a background-color to a div wrapping article and aside in HTML/CSS?

    How to prevent specific css style sheet from styling a specific html tag

    css - how to change image source by its id?

    How to achieve a two column centered layout, with the main column expandable on wider screens?

    How to extend the length of a page through CSS?

    How to use JSF generated HTML element ID with colon “:” in CSS selectors?