title: edit style of jsf component primefaces
body: <p>I have this page : </p>
  
  <pre><code>    &lt;?xml version='1.0' encoding='UTF-8' ?&gt;
  &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"
        xmlns:ui="http://java.sun.com/jsf/facelets"
        xmlns:p="http://primefaces.org/ui"
        xmlns:h="http://java.sun.com/jsf/html"
        xmlns:f="http://java.sun.com/jsf/core"&gt;
  
      &lt;body&gt;
  
          &lt;ui:composition template="./template_admin.xhtml"&gt;
  
              &lt;ui:define name="tohead"&gt;
              &lt;/ui:define&gt;
  
              &lt;ui:define name="content"&gt;
  
  
                  &lt;p:panel header="Edition d'une commande"  style="height: 490px;" id="panel"  &gt;
                      &lt;p:messages id="msgs"/&gt;
                      &lt;h:panelGrid columns="3" style="float:left;" columnClasses="column" cellpadding="5"&gt;
  
                          &lt;h:outputLabel  for="idd" value="Id : " /&gt;   
                          &lt;p:inputText  disabled="true" value="#{editCommandController.myCom.id}" id="idd" required="true" requiredMessage="veuillez saisir un nom" label="Nom"  /&gt;  
                          &lt;p:message for="idd" display="icon"/&gt;
  
                          &lt;h:outputLabel for="dteenvoi" value="Date d'envoi : " /&gt;  
                          &lt;p:inputText disabled="true" id="dteenvoi" value="#{editCommandController.myCom.dateEnvoi}" required="true" requiredMessage="veuillez saisir un prénom" label="Prénom" /&gt;  
                          &lt;p:message for="dteenvoi" display="icon"/&gt;
  
                          &lt;h:outputLabel for="division" value="Date de livraison recommandée : " /&gt;  
                          &lt;p:inputText disabled="true"  id="division" value="#{editCommandController.myCom.dateLivraisonRecommande}" /&gt;  
                          &lt;p:message for="division" display="icon"/&gt;
  
                          &lt;h:outputLabel for="poste" value="Nombre de page : " /&gt;  
                          &lt;p:inputText id="poste" disabled="true" value="#{editCommandController.myCom.nbrePage}" /&gt;  
                          &lt;p:message for="poste" display="icon"/&gt;
  
  
                          &lt;h:outputLabel for="email" value="Nombre d'exemplaire : " /&gt;  
                          &lt;p:inputText id="email" disabled="true" value="#{editCommandController.myCom.nbreExemplaire}" /&gt;
                          &lt;p:message for="email" display="icon"/&gt;
  
                          &lt;h:outputLabel for="autres" value="Type d'impression : " /&gt;  
                          &lt;p:inputText id="autres" disabled="true" value="#{editCommandController.myCom.typeImpression}"  /&gt;  
                          &lt;p:message for="autres" display="icon"/&gt;
  
                          &lt;h:outputLabel for="identifiant" value="Observation : " /&gt;  
                          &lt;p:inputTextarea id="identifiant" disabled="true" value="#{editCommandController.myCom.observation}" required="true" validator="#{addUserController.validateIdentifiant}" requiredMessage="veuillez saisir un identifiant" label="Identifiant" /&gt;  
                          &lt;p:message for="identifiant" display="icon"/&gt;
  
                          &lt;h:outputLabel for="dec" value="Decision : " /&gt;  
                          &lt;p:selectOneMenu  id="dec" value="#{editCommandController.myCom.decision}" &gt;  
                              &lt;f:selectItems value="#{editCommandController.decisions}" /&gt;  
                              &lt;p:ajax update="etat gridContainer :myform:alors" event="change" /&gt;
                          &lt;/p:selectOneMenu&gt;  
                          &lt;p:message for="dec" display="icon"/&gt;
  
                          &lt;h:outputLabel for="etat" value="Etat : " /&gt;  
                          &lt;p:selectOneMenu  id="etat" value="#{editCommandController.myCom.etat}" disabled="#{editCommandController.myCom.decision eq 'rejettée'}" &gt;  
                              &lt;f:selectItems value="#{editCommandController.etats}" /&gt;   
                          &lt;/p:selectOneMenu&gt;  
                          &lt;p:message for="etat" display="icon"/&gt;
  
                          &lt;h:outputLabel for="calen" value="Date de Livraison réelle: *" /&gt;
                          &lt;p:calendar  label="Date de Livraison reelle" id="calen" showOn="button" effect="slide" value="#{editCommandController.myCom.dateLivraisonReelle}" pattern="MM/dd/yyyy HH:mm" &gt;
                          &lt;/p:calendar&gt;  
                          &lt;p:message for="calen" id="msgSurname4" display="icon"/&gt;
  
  
                      &lt;/h:panelGrid&gt;  
  
                      &lt;p:outputPanel id="gridContainer" layoyut="block" &gt;
                          &lt;h:panelGrid id="alors"   rendered="#{editCommandController.myCom.decision ne 'rejettée'}" &gt;
                              &lt;p:dataTable id="cars" style="width: 80px;" var="car" value="#{editCommandController.pdm}" paginator="true" rows="10"  
                                           selection="#{editCommandController.selectedPapier}" selectionMode="single" &gt;  
  
                                  &lt;p:ajax event="rowSelect" listener="#{editCommandController.onRowSelect()}"   
                                          update=":myform:jesuis" /&gt;  
  
                                  &lt;f:facet name="header"&gt;  
                                      RadioButton Based Selection  
                                  &lt;/f:facet&gt;                    
  
                                  &lt;p:column headerText="libelle"&gt;  
                                      #{car.libelle}  
                                  &lt;/p:column&gt;  
  
                                  &lt;p:column headerText="format"&gt;  
                                      #{car.format}  
                                  &lt;/p:column&gt;  
  
                                  &lt;p:column headerText="stock" &gt;  
                                      #{car.stock}  
                                  &lt;/p:column&gt;  
  
                              &lt;/p:dataTable&gt;  
  
  
                              &lt;h:outputText  id="jesuis" value=" c est la papier : #{editCommandController.selectedPapier.libelle}"  /&gt;
  
  
                              &lt;h:panelGrid columns="2" cellpadding="5" style="margin-top: 22px;"&gt;  
                                  &lt;h:outputLabel value="Reliure :" for="city" /&gt;
                                  &lt;p:selectOneMenu id="city" value="#{addPapierController.choixReliure}"&gt;  
                                      &lt;f:selectItem itemLabel="choisir reliure" itemValue="" /&gt;  
                                      &lt;f:selectItems value="#{addPapierController.libelleReliures}" /&gt;  
                                      &lt;p:ajax 
                                          listener="#{addPapierController.handleCityChange}" /&gt;  
                                  &lt;/p:selectOneMenu&gt;
                              &lt;/h:panelGrid&gt;
  
                          &lt;/h:panelGrid&gt;
                      &lt;/p:outputPanel&gt;
  
  
                      &lt;h:panelGrid columns="2" style="float:none;display: block;" &gt;
                          &lt;p:commandButton value="Editer" ajax="false" action="#{editCommandController.updateCommand()}" update="panel" &gt;&lt;/p:commandButton&gt;
                          &lt;p:commandButton value="Annuler"  immediate="true" action="commandesUser" ajax="false" &gt;&lt;/p:commandButton&gt;
  
                      &lt;/h:panelGrid&gt;
                  &lt;/p:panel&gt;  
  
              &lt;/ui:define&gt;
  
          &lt;/ui:composition&gt;
  
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>I would like to divide the panel into three part : 
  the fisrt in the left of the page 
  the second in the right of the page 
  and the third in the bottom of the page</p>
  
  <p>I managed to put the first and the second but the third part is just below the second part, I would like to put it only in the bottom</p>