Question

I’m trying to create some kind of grid layout with css:

Having a content div, which is devided into 2 colums: main + right.

Now I have 2 kinds of elements. I always want these elements to align side by side.

So I’m having something like this:

#outerPanel{
 width:100%; 
 float:right; 
 position:relative; 
  }

#rightcol{
 width:35%; 
 float:right; 
 position:relative; 
 }

#maincol{
 float: left; 
 position: relative; 
 width:65%; 
 }

and my index.xhtml:

    <p:panel id="outerPanel">

            <h:panelGroup id="maincol">
                <ui:include src="table1.xhtml" />
            </h:panelGroup>
            <h:panelGroup id="rightcol">
                <ui:include src="input1.xhtml" />
            </h:panelGroup>

            <h:panelGroup id="maincol">
                <ui:include src="table2.xhtml" />
            </h:panelGroup>
            <h:panelGroup id="rightcol">
                <ui:include src="input2.xhtml" />
            </h:panelGroup>


    </p:panel>

Of course this does only work for the first occurrence of the id’s, as one is not allowed to reuse the id.
But this shows what I’m trying to do. How can I else set it up?

thnx

Answer 1

Of course this does only work for the first occurrence of the id’s, as one is not allowed to reuse the id.

Just use class instead of id.

<h:panelGroup styleClass="maincol">
    ...
</h:panelGroup>
<h:panelGroup styleClass="rightcol">
    ...
</h:panelGroup>

<h:panelGroup styleClass="maincol">
    ...
</h:panelGroup>
<h:panelGroup styleClass="rightcol">
    ...
</h:panelGroup>

with

.rightcol {
    ... 
}

.maincol {
    ...
}