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..

    CSS - how to set a position of UL in LI

    How to use fallback values for `display` property in CSS?

    How to make heading appear in different colors

    How to apply this effect to the last line of a text?

    How to fix CSS background position

    how to set the css left property of a class on the basis of an ID of a tag

    Webpack bundle does not show css

    How to get a white outline around an image in CSS

    How to do automatic reload of page when viewed in iPad Portrait mode?

    how to repeat a small background image througout the page?

    How to apply css to div content based on regex

    Images not showing up in correct spot [closed]

    How can I make an svg scale with its parent container?

    How To Add Links To Right Of Header?

    How to make submit input and text input equally spaced

    How to change CSS element of data-pid using jquery

    How to remove a div with fade out effect in JavaScript?

    How to add a color overlay to a background image?

    how to disable drupal7 system css files?

    How to make a jquery slider from scratch

    how to create the scrolling Menu in css?

    How to use font-family with same name?

    CSS: How to prevent div from overlapping parent height or parent border

    How to build the whole web site from css design [closed]

    How to position an element relative to the background image width

    How to create a floating div with jQuery

    how to change properties of a parent div on hover of child div

    How to print HTML/PHP page without including the NAVIGATION TAB contents, FOOTER, and head part

    How to prevent Float contents overlap other contents below

    How to fix “Blocked loading mixed active content” for css and js over https