I am facing some issues with my CSS.
In the JSP webpage, I have a container styled with a div that works perfectly. However, when I insert another div tag to style certain elements, those elements end up outside of the container for some reason.
Below is the CSS code:
.container
{
position: relative;
width:1000px;
margin:0 auto 0 auto;
padding:5px;
border:1px solid #cccccc;
background:#ffffff;
}
div.ex1
{
position: absolute;
top: 300px;
left: 150px;
width:150px;
padding:5px;
border:1px solid gray;
}
And here's the JSP code:
<%@ page import="java.util.*" %>
<%@ page import="DTO.Product" %>
<%@ page import="DAO.ListTabletsDao" %>
<%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO- 8859-1"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Page</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div class="container">
<img src="computer_banner_blue.gif" alt="banner">
<div class="nav">
<ul> <li><a href="home.jsp">Home</a></li><li><a href="tablets.jsp">Tablets</a></li>
<li><a href="laptops.jsp">Laptops</a></li><li><a href="computers.jsp">Computers</a></li>
<li><a href="printers.jsp">Printers</a>
<li><a href="contact.jsp">Contact</a></li> <li><a href="about.jsp">About</a> </li> </ul>
</div>
<form action="UserActionServlet" method="post" name="searchForm">
<input type="text" size="20" name="searchProduct">
<input type="hidden" name="action" value="search" />
<input type="submit" value="Search">
</form>
<div class ="tabHeader">
<h1>Tablets</h1>
</div>
<%
ListTabletsDao prod = new ListTabletsDao();
List<Product> prods = prod.getDesc();
request.getSession().setAttribute("Prods", prods);
prods = (List)(request.getSession().getAttribute("Prods"));
int numId;
int y = 0;
if (prods != null){
for (Product p: prods){
numId = p.getProduct_id();
y++;
%>
<div class="ex<%=y%>">
<center>
<%=p.getTitle()%> <br> <img width="100" height="100" src="<%=p.getImageUrl()%>">
<a href="productInfo.jsp?productId=<%=(numId)%>"><button>more info</button></a>
<%=p.getPrice()%>
</center>
</div>
<%
}
}
%>
</body>
<div>
</html>
Can someone provide any insights on this issue?
Thank you!