Horizontal placement of components in JSF

Should be simple but I couldn't find the answer, I would like to place components horizontally instead of vertically.

What I'm trying to achieve is a rich:toolbar with 2 or more rows. I've been tryin开发者_StackOverflow中文版g to do that with a toolbar that has a panelgrid and two panelgroups like this:

<rich:toolbar...>
  <f:panelgrid columns="1"...>
    <f:panelgroup id="row1" .../>  <-- Should be horizontal placement
    <f:panelgroup id="row2" .../>  <-- Should be horizontal placement
  <f:panelgrid/>
<rich:toolbar/>

So how do I make the panelgroup layout horizontal (Or should I use something else?)

Thanks!

You probably already know that JSF in webserver ends up as HTML in webbrowser. In HTML, there are several ways to place elements horizontally (eventually with help of CSS):

1. Group them in inline elements (like <span> or any element with display: inline;).
2. Group them in block elements (like <div> or any element with display: block;) and give them all a float: left;.

The JSF <h:panelGrid> renders a HTML <table> element wherein each child component is taken as a <td>. The columns attribute represents the max amount of <td> elements in a single <tr> (so that the <h:panelGrid> knows when to put a </tr><tr> in). The JSF <h:panelGroup> renders a <span> element.

To achieve way 1 with JSF, you just need to group them in separate <h:panelGroup> components.

<rich:toolbar ...>
    <h:panelgroup id="row1" ... />
    <h:panelgroup id="row2" ... />
</rich:toolbar>

Way 2 can be done the same way, but then with <h:panelGroup layout="block"> instead and a float: left; in their CSS.