Java EE (Java Enterprise Edition) General Discussion

I have a use case implemented using Facelets, Richfaces, JSF and Seam that requires a presentation of labels (HtmlOutputText components), HtmlInputText components, and graphic images.

There are three columns in this table. I am using h:panelGrid to render the HTML elements like table, tbody, tr, td, etc.

The problem I have is how to top align the elements in the first (leftmost) column of the table and vertically center align the graphic in the right-most column?

I tried using <s:div class="divTop"> to surround the affected xhtml only referencing this style in CSS:

div.divTop TD {
	vertical-align:top;
}

But that just misaligns all the cells in the table.

Also, is it possible to assign width percentages to each column using h:panelGrid?

<rich:panel>
		        		<h:panelGrid columns="3">
		        			   	<h:form>
							        <h:panelGrid columns="3">
							        	<h:column>
							        		<b>Serial Number:</b> 
							        	</h:column>

							        	<h:column>
							        		<s:decorate template="layout/edit.xhtml">
							        		    <h:inputText id="serialNumberId" 
							        					 value="#{manageEquipment.serialNumber}" 
							        					 size="32" 
							        					 maxlength="32" 
							        					 required="true">
							        			</h:inputText>		        			
							        		</s:decorate>
							        	</h:column>	
							        	<h:column>
							        	<!-- can't use h:commandButton and thus can't use s:defaultAction either
							        	b/c we need AJAX req/res cycle to show plz wait modal panel -->
							        		<a4j:commandButton id="searchButton"				        			  
								        					value="Search" 
								        					action="#{manageEquipment.searchSerialNumber}">    						   
							       					<!--  <s:defaultAction /> -->
							        		</a4j:commandButton>			        	
						        		</h:column>
							        </h:panelGrid>	
							        <BR/>
							        <BR/>
									<BR/>
							        <s:div style="text-align:center;"> 
								        <h:graphicImage id="newOrder" 
									   				    value="/img/new_order.jpg" 
									   				    rendered="#{manageEquipment.showCreateNew}"/> 
									   	<BR/>									   										   	
								        <a4j:commandLink    id="createNewLink" 
								        					ajaxSingle="true"  
															value="Create New"				 				
											 				action="#{manageEquipment.setCreateNewMode}"
											 				rendered="#{manageEquipment.showCreateNew}"/>

									</s:div>							        	
							   </h:form>

						  <a4j:outputPanel rendered="#{manageEquipment.showCreateNew}">		
						  		<h:form>	
						  			<s:decorate template="/layout/display.xhtml">             
										<ui:define name="label">MAC Address:</ui:define>
										<h:outputText value="#{equipmentDetailBean.macAddress}"/>
									</s:decorate>

							        <s:decorate template="/layout/display.xhtml">             
										<ui:define name="label">Unit Address:</ui:define>
										<h:outputText value="#{equipmentDetailBean.unitAddress}"/>
									</s:decorate>

								    <s:decorate template="/layout/display.xhtml">             
										<ui:define name="label">Item Number:</ui:define>
										<h:outputText value="#{equipmentDetailBean.itemNumber}"/>
									</s:decorate>

								    <s:decorate template="/layout/display.xhtml">             
										<ui:define name="label">Description:</ui:define>
										<h:outputText value="#{equipmentDetailBean.description}"/>
									</s:decorate>

								    <s:decorate template="/layout/display.xhtml">             
										<ui:define name="label">Manufacturer:</ui:define>
										<h:outputText value="#{equipmentDetailBean.manufacture}"/>
									</s:decorate>

								    <s:decorate template="/layout/display.xhtml">             
										<ui:define name="label">Inventory Receipt Date:</ui:define>
										<h:outputText value="#{equipmentDetailBean.inventoryReceiptDate}">
											<s:convertDateTime pattern="MM-dd-yyyy HH:mm:ss"/>
										</h:outputText>
									</s:decorate>

								    <s:decorate template="/layout/display.xhtml">             
										<ui:define name="label">Earliest Return Date:</ui:define>
										<h:outputText value="#{equipmentDetailBean.earliestReturnDate}">
											<s:convertDateTime pattern="MM-dd-yyyy HH:mm:ss"/>
										</h:outputText>
									</s:decorate>

								    <s:decorate template="/layout/display.xhtml">             
										<ui:define name="label">Number of Returns:</ui:define>
										<h:outputText value="#{equipmentDetailBean.numberOfReturns}"/>
								   		<rich:spacer width="10"/>
								   		<a4j:commandLink id="mod1" 
														   value="view detail"
														   action="#{createRepairCase.getEquipmentHistoryList}"
														   ajaxSingle="true"
														   oncomplete="rerenderModal();" />																
									</s:decorate>	
								</h:form>							
							</a4j:outputPanel>

						    <h:graphicImage id="image1" 
						   				   value="/img/#{equipmentDetailBean.imageName}"
						   				   rendered="#{manageEquipment.showCreateNew}"/> 

						</h:panelGrid>		
					 </rich:panel>