Greetings everyone! I have been struggling to align two divs - one on the right with a width of 30% and the other on the left with 70%. Despite my efforts, I have not been able to find a solution. I am hopeful that someone here can assist me.
My setup involves primefaces 3.5 and jsf 2.1, using the primefaces Theme from jQuery.
Below is a snippet of my template:
<ui:composition 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" template="/META-INF/templates/template.xhtml">
<ui:define name="content">
<p:panelGrid columns="2" columnClasses="verticalAlignTop,verticalAlignTop">
<p:panel id="panelTemplContSplitLeft" styleClass="left"
style="border-radius: 13px 13px 13px 13px;
-moz-border-radius: 13px 13px 13px 13px;
-webkit-border-radius: 13px 13px 13px 13px;
border: 2px solid #080808;
background: #fcfcfc; width: 350px; ">
<ui:insert name="contentLeft">
<h:outputLabel value="This is default Content Left" />
</ui:insert>
</p:panel>
<p:panel id="panelTemplContSplitRight" styleClass="right"
style="border-radius: 13px 13px 13px 13px;
-moz-border-radius: 13px 13px 13px 13px;
-webkit-border-radius: 13px 13px 13px 13px;
border: 2px solid #080808;
background: #fcfcfc; width:800px;">
<ui:insert name="contentRight">
<h:outputLabel value="This is default Content Right" />
</ui:insert>
</p:panel>
</p:panelGrid>
</ui:define>
</ui:composition>
This excerpt is from my theme.css file:
.verticalAlignTop { vertical-align: top; }
.right {
width: 70%;
margin-left: auto;
margin-right: 1em;
right: 0px;
}
.left {
width: 30%;
margin-left: 1em;
margin-right: auto;
}