Problem positioning Data using CSS and <s:iterate ( information is placed on top of each other).

[Sammy Bill]

Hello,

In the following code:

  

 <s:iterator value="products" id="product">
		   	<s:form action="addToCart.action" method="POST" theme="css_xhtml">
		   	<s:hidden name="productID" value="%{productID}"></s:hidden>
        	<s:label cssStyle="position:relative; left:50px; top:150px;" value="Product:"/>
        	<s:label cssStyle="position:absolute; left:200px; top:150px;" name="productID"/>
        	<s:label cssStyle="position:absolute; left:50px; top:170px; " value="Description:"/>
        	<s:label cssStyle="position:absolute; left:200px; top:170 px; " name="description"/>
        	<s:label cssStyle="position:absolute; left:50px;top:190px; height:5px; width:200px" value="Quantity available:"/>
        	<s:label cssStyle="position:absolute; left:200px; top:190px; height:5px; width:200px" name="quantity"/>
        	<s:label cssStyle="position:absolute; left:50px; top:210px; height:5px; width:200px" value="Unit Price:"/>
        	<s:label cssStyle="position:absolute; left:200px; top:210px; height:5px; width:200px" name="unitPrice"/>
        	<s:label cssStyle="position:absolute; left:50px; top:230px;height:5px; width:200px" value="Quantity Desired:"/>
        	 <s:textfield cssStyle="position:absolute; left:200px; top:230px; height:20px; width:50px" name="quantityDesired" size="3"/>
			<s:submit cssStyle="position:absolute; left:50px; top:250px;height:24px; width:100px" value="add to cart"/>
			
			</s:form>
		</s:iterator>

when the data is displayed, It is displayed on top of each other. I understand that it is because i m setting the same CSS dimension for the element.
How can i change the CSS style properties based on the number of iteration so the data will not be displayed on top of each other?

Thanks

[Ankit Garg]

Oussama you are using position:absolute here. That's why all the elements are coming on top of each other. Why are you doing it is not clear to me, but a simple solution would be to use position:relative so that the elements are placed in relation to each other at each iteration. That would be the simplest solution...