The Art of Positioning Containers in CSS

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!

Answer №1

After conducting a test, it seems that everything is functioning properly. However, it is important to note that adding a height may be necessary to prevent the container div from collapsing. When working with relative positioning, it can be helpful to think of it as fixed positioning without a set height, causing it to be "iced" into place. This issue is related to the use of relative and absolute positioning in CSS.

For further clarification and education on this topic, you can visit the following link: http://www.w3.org/wiki/CSS_static_and_relative_positioning

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>

<style>
.container 
{
position: relative;
width:1000px;
margin:0 auto 0 auto;
padding:5px;
border:1px solid #cccccc;
background:#ffffff; 
height:400px;
}

div.ex1
{
position: absolute;
top: 300px;
left: 150px;
width:150px;
padding:5px;
border:1px solid gray;
}
</style>
</head>
  <div class="container">
    <div class="ex1"> This is the inside div</div>
  </div>
<body>
</body>
</html>

If you have any further questions or need assistance, feel free to reach out.

Answer №2

Exploring the box model concept in CSS can open up new possibilities for design. While some may not prefer w3schools, they offer a helpful explanation here.

If you're looking to delve deeper into CSS, it's important to continue exploring and experimenting with different properties.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>

<style>
.container 
{
width:1000px;
margin:0 auto 0 auto;
padding:5px 30px 5px 30px;
background:#ffffff; 
height:100%;
border:green 1px solid;
}

div.ex1
{
margin:0 0 0 0;
padding:10px 5px 10px 5px;
width:150px;
border:1px solid gray;
}
#outterWrapper{
    border:solid red 1px;
    padding:20px;
    }
</style>
</head>
<div id="outterWrapper">
  <div class="container">
    <div class="ex1"> This is the inside div</div>
    <!-- ADDING 10PX BETWEEN THE DIV'S USING CSS -->
    <div class="ex1"> This is the inside div</div>
    <div class="ex1"> This is the inside div</div>
    <div class="ex1"> This is the inside div</div>
    <div class="ex1"> This is the inside div</div>
  </div><!-- END CONTAINER -->
</div><!-- END OUTTER WRAPPER -->
<body>
</body>
</html>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

I aim to display my popup only once per day

Is there a way to display this popup only once per day? <span id='close' onclick='this.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode); return false;'>x</span> <iframe width="360" height="240" sr ...

Saving an image and form data together in local storage can be accomplished by using JavaScript

Is there a way to save an image to local storage along with form data? I would like to store the form data in a database and keep the image in local storage. Any help would be greatly appreciated. Thank you! <form id="saveImageForm"><input type ...

Learn how to display two different videos in a single HTML5 video player

Seeking a solution to play two different videos in one video element, I have found that only the first source plays. Is jQuery the answer for this problem? HTML Code: <video autoplay loop id="bbgVid"> <source src="style/mpVideos/mpv1.mp4" type ...

Tips for restricting additional input when maximum length is reached in an Angular app

In my Angular 6 application, I am working on implementing a directive that prevents users from typing additional characters in an input field. However, I want to allow certain non-data input keys such as tab, delete, and backspace. Currently, I have an if ...

What is the best way to create a toggle button that can show more or show less of a text snippet with animation?

Is it possible for someone to assist me with showing a long text partially and providing a "show more" button to reveal the rest, along with a "show less" option, all with some CSS animation? I was thinking of using a font awesome arrow down icon for expan ...

The hidden overflow seems to be inconsistently effective

I've been working on creating some buttons with a rollover state. I have an image inside a div with overflow:hidden to hide the inactive state, but sometimes it doesn't work properly. What's even stranger is that when I inspect the page usi ...

The HTML image tag is malfunctioning on a Windows system

I'm currently updating an HTML page and trying to add an image using the img tag. <img src="file:///C:/wamp/www/images/Sat.png" class="img-circle" alt="User Image"/> However, it doesn't seem to be working! ...

Using Vuetify to send a parameter from a select option to a method as a parameter

Just starting out with vuejs and encountering an issue passing parameters from a selected option to my JavaScript method. In my updateClientIsMaster method, the item is always undefined. However, when I added v-on:change="updateClientIsMaster in the & ...

What is the process for using AJAX and PHP to upload an image file?

I'm facing an issue where I want to insert an uploaded image into a database with user details for a profile picture. The output I receive currently shows {"current_field":null,"field_count":null,"lengths":null,"num_rows":null,"type":null}. How can th ...

How to align buttons in the center of a Bootstrap grid column using Angular's *ngFor directive

I have been trying to center some buttons using the bootstrap 4 grid system within a column with a green border. Despite using justify-content-center, I have not been successful so far. <div class="row" style="border:1px solid red;"& ...

Django works perfectly on local host, but unfortunately, hosting servers are not cooperating

Programming is a new skill for me and I recently created a weather app using Django. The app functions perfectly when I run it locally with the server, but I've encountered difficulties when trying to host it on various platforms. Here is the link to ...

Can JavaScript be Utilized to Create Dynamic Layouts Successfully?

Are you curious about the viability of using Javascript to create fluid website layouts? While it is possible, how does it compare in terms of performance and complexity when compared to other methods like CSS3/HTML5? Take a look at the function below that ...

What is the best way to incorporate content just out of view below the parallax section that becomes visible as you scroll?

Check out this amazing parallax effect: https://codepen.io/samdbeckham/pen/OPXPNp <div class="parallax"> <div class="parallax__layer parallax__layer__0"> <img src="https://github.com/samdbeckham/blog/blo ...

JavaScript tip: Improve the way you highlight the current navigation page while scrolling by finding alternative methods to using "scrollY > x"

Currently, my webpage layout is divided into 4 sections - HOME, ABOUT, SKILLS, and CONTACT. Below is the JavaScript code I am using to highlight a specific section on the navigation bar based on the scroll position: let home = document.querySelector(" ...

How can I center two images using a hover effect in WordPress?

When the mouse hovers over an image, it changes to another image. Everything works smoothly except for one issue - the image is not centered. Below is the code I am currently using: HTML: <figure> <a> <img class="hover" src="na ...

The loop is being controlled but the data is not being added and shown in the HTML div

I am struggling to display JSON data in an HTML div using a for loop. While my control is entering the loop, the data is not being appended and displayed in the HTML div. Here is the JSON data: [{"id":"15","FirstName":"ranjan","MiddleName":"","LastName": ...

Utilize AngularJS to create a custom tag with a directive included

I've been working on creating a custom tag for a reusable component in a web page, but I seem to have hit a roadblock. It's not functioning as expected, and I feel like I might be overlooking something. If anyone could provide some guidance or p ...

How to customize font styles in AngularJS

I'm attempting to modify the font style of an element when a certain variable is true. Within my controller, I have a variable that retrieves its value. My objective is to adjust the font style depending on this value using ng-style. I've exhau ...

Utilize the search bar within a JavaScript function

One issue I am facing is taking an input from a search box and using that value as a parameter for another function. However, every time I click the button, the global variable resets itself when the page refreshes. In my javascript code, this is what I h ...

Restricting the height of the grid list in Vuetify

Lately, I've been working with Vue.js and the Vuetify framework, and I encountered a challenge that has me stumped. In certain instances, I need to present data in a grid layout using the vuetify grid component. After examining the code, I decided t ...