I want to add another table next to my dataGrid, floating to the left of it. Like this representation in the main div:
| | |
| A | B |
| | |
Here, A represents the current dataGrid containing all user information, and B will be the new content. I attempted to create a table inside the main div with two columns (for left and right parts), but B extended beyond the boundaries of the main div. I also tried using CSS for the left and right columns and added two additional divs, but the desired layout was not achieved. B still appeared below A. Any advice on how to accomplish this would be greatly appreciated. Below is the source code of the page.
The structure of my page is as follows:
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:p="http://primefaces.org/ui"
xmlns:c="http://java.sun.com/jsp/jstl/core">
<ui:composition template="/WEB-INF/templates/BasicTemplate.xhtml">
<ui:define name="content">
<div id="container" style="min-height: 100%; position: relative;">
<div id="left"
style="background-image: url('#{resource['images/left.png']}'); background-repeat: repeat-y; height: 1800px; width: 163px; float: left;">
<br />
</div>
<div id="main" style="width: 920px; float: left;">
<f:view>
<h:form rendered="#{not empty loginBean.name}">
<h:outputStylesheet library="css" name="css.css" />
<center>
<h2>My Profile</h2>
</center>
<p:dataGrid var="user" value="#{profileBean.userList}">
<p:panelGrid columns="2">
<f:facet name="header">
<p:graphicImage value="#{profileBean.image}" alt="${user.name}"
width="150px" height="150px">
<f:param name="userId" value="#{user.id}" />
</p:graphicImage>
</f:facet>
<h:outputText value="Name: " />
<h:inputText value="#{user.name}" />
<h:outputText value="Phone: " />
<h:inputText value="#{user.phone}" required="true">
<f:validateRegex pattern="[0-9]+" />
</h:inputText>
<h:outputText value="Role: " />
<h:outputText value="#{user.userRole.roleName}">
</h:outputText>
<f:facet name="footer">
<h:panelGroup style="display:block; text-align:center">
<p:commandButton id="submit" value="Save changes"
actionListener="#{profileBean.editUser()}" >
<f:attribute name="profileBean.selectedUser" value="#{user}" />
</p:commandButton>
</h:panelGroup>
</f:facet>
</p:panelGrid>
</p:dataGrid>
<hr />
</h:form>
</f:view>
</div>
</div>
<div id="right"
style="background-image: url('#{resource['images/right.png']}'); background-repeat: repeat-y; height: 1800px; width: 150px; float: right;">
<br />
</div>
</ui:define>
</ui:composition>
</html>