Dynamically assign values in CSS - css

Question

Is it possible to position a link or text dynamically based on the content present above.
For example, I have a page as follows:
Dashboard.xhtml
<div id="innerContainer">
<p:dataTable id = "adminDataTbl" value="#{userAdminMB.userRoles}" var="userList" selectionMode="single" selection="#{userAdminMB.selectedUser}" rowKey="#{userList.ntId}" styleClasses="order-table,table" headerClass="order-table-header" rowClasses="order-table-odd-row,order-table-even-row" >
<p:column styleClass="table-data">
#{userList.ntId}
</p:column>
<p:column styleClass="table-data">
#{userList.roleList}
</p:column>
</p:dataTable>
</div>
<div id="userLink">
<h:commandLink action="#{userAdminMB.addUser}">
<h:outputText value="Add a User to the Admin Tool"/>
</h:commandLink>
</div>
styles.css
#outerContainer{
width: 100%;
height: 500px;
top: 150px;
border: 1px thin;
}
#innerContainer{
width:100%;
height:400px;
text-align: right;
margin-right: 9px;
font-family: Arial;
font-size: 16px;
border: 1px thin;
}
#addUserLink{
font-family: Arial;
font-size: 16px;
float: left;
top: 550px;
position: inherit;
}
.editUserLink-data{
font-family: Arial;
font-size: 16px;
float: right;
top: 175px;
}
The data in <p:dataTable> may be different based on the DB hit that is made. I need the addUser link to be positioned accordingly.
Please help. Any help will be much appreciated.

Answer 1

If I am understanding you correctly then what you want to do is:
<div sytle="textalign: right" id="firstLink">Link1</div>
<div id="dynamicContent">
dynamic content here
</div>
<div id="link2">Link2</div>
If you want to add relative positioning between the dynamicContent and link2 divs you can do so.
Using the above code the link two will fall below the dynamic content on your page