Best Practice Problems

Question

Trying to be a good developer :) and so i read many articles on the best way to do things and try to adopt these in my developments.
For my recent JSF developments this has included dropping JSTL and trying to implement everything in 'pure JSF' way.
And from a HTML point of view, this has meant styling using CSS, and not resorting to complex tables to create layout, but again using CSS to create the layout.
This is where i have my problems.
I have some content like
     <div class="row">
     <span class="rightj15">
     <h:outputText value="User name:"/>
     </span>
     <span class="leftj2">
     <h:inputText id="username" value="#{userDetailsBean.user.displayName}" disabled="true" styleClass="inputfield"/>
     </span>
     <span class="leftj3">
     <h:message for="username" errorClass="errorMessage"/>
     </span>
     </div>
This is one 'row' of output which is styled and layed out nicely. Other rows are also displayed showing other things.
The problem is that some rows are conditional, i.e. only should be displayed for certain types.
I can control the rows with a panelGgroup,
     <h:panelGroup rendered="#{userDetailsBean.user.displayName}">
     <div class="row">
     <span class="rightj15">
     <h:outputText value="User name:"/>
     </span>
     <span class="leftj2">
     <h:inputText id="username" value="#{userDetailsBean.user.displayName}" disabled="true" styleClass="inputfield"/>
     </span>
     <span class="leftj3">
     <h:message for="username" errorClass="errorMessage"/>
     </span>
     </div>
     </h:panelGroup>
The problem here is that although the panelGroup means that the content is not rendered, the layout is still present (in terms of the divs and spans). This is a problem because it means i get a blank row when the page is displayed in the browser.
The only way i can currently see to get round this is to either..
a) Use <c:if> to do the conditional rendering, loose my pure JSF solution, and i have to make sure my backing beans are already created etc. etc.
b) Drop my CSS layout and use tables instead.
Does anybody have any other ideas?

Answer 1

Well, i tried what you suggested, but this didn't help, just screwed up the layout.
As i understand it, f:verbatim is used to encapulate non jsf template and action elements...