newbie JSF question - How to achieve this layout?

Question

Hi, I'm trying to achieve the layout shown here

Each of the panels should be linked to a backing bean from which I will later add differrent components according to context.

I tried using panelgrid but could not achieve this look. I would prefer to use just JSF for this but if impossible or too complicated RichFaces is ok too.

Thanks!!

Answer 1

You can use the HTML code with which you have achieved the above layout. I.e.

<table>
   <tr>..</tr>
   <tr>..</tr>
</table>

However, the table-less layouts are preferred - i.e. using <div> tags. (see here)

Answer 2

It's not only matter of JSF/HTML, but it's also a matter of CSS. The above layout can basically already be achieved as follows:

<h:panelGroup id="header" layout="block"></h:panelGroup>
<h:panelGroup id="leftcol" layout="block"></h:panelGroup>
<h:panelGroup id="rightcol" layout="block"></h:panelGroup>

(which generates the following HTML)

<div id="header"></div>
<div id="leftcol"></div>
<div id="rightcol"></div>   

You can style/position it using CSS like as:

#header {
    width: 100%;
    height: 100px;
}
#leftcol {
    width: 200px;
    float: left;
}
#rightcol {
    float: left;
}

That's all.