Using CSS to position elements absolutely while also adjusting the width of the div

In one section of my website, I have a specific div structure. This structure consists of two divs stacked on top of each other. The first div is divided into two parts: one part with a width of 63% and another part with a button.

Beneath the first div, there is another div with the same width (63%) and positioned absolutely.

However, setting the position to absolute does not result in both divs being the same size, even though their widths are identical.

Here is a snippet of the CSS code:

#two{
  border: 1px solid;
  width: 63%;
  position: absolute; //Enabling this results in varying sizes despite having the same width
}

You can view my code pen link here: https://codepen.io/JGSpark/pen/bZyvEV?editors=1100

I am looking for a solution to make both divs the same size when using position absolute. Any suggestions on what I can try?

Answer №1

When you apply position: absolute without specifying a relative element, it will be positioned relative to the root element.

If a 63% textValue is set for #one element, then this percentage refers to 63% of that specific element. However, if the same percentage is applied to #two, it indicates 63% of the whole document including the default margin of the body. In this case, the body margin should be reset to zero:

body {
  margin: 0; /* reset */
}

#template {
  width: 30%;
}

#textValue {
  border: 1px solid red;
  width: 63%;
  float: left;
}

#icon {
  width: 5%;
}

#text {
  width: 95%;
  float: left;
}

#one {
  width: 100%;
}

#two {
  border: 1px solid;
  width: 63%;
  position: absolute;
}
<div id="one" class="row">
  <div id="textValue"><span id="text">ONE Inner text</span><span id="icon"><i class="fa fa-angle-up"></i></span></div>
  <button id="template" class="btn primary">Template</button>
</div>
<div id="two">TWO</div>

Alternatively, you can wrap the element with position: relative in a wrapper - as illustrated in the demo below:

.wrapper {
  position: relative; /* added */
}

#template {
  width: 30%;
}

#textValue {
  border: 1px solid red;
  width: 63%;
  float: left;
}

#icon {
  width: 5%;
}

#text {
  width: 95%;
  float: left;
}

#one {
  width: 100%;
}

#two {
  border: 1px solid;
  width: 63%;
  position: absolute;
}
<div class="wrapper">
  <div id="one" class="row">
    <div id="textValue"><span id="text">ONE Inner text</span><span id="icon "><i class="fa fa-angle-up "></i></span></div>
    <button id="template" class="btn primary ">Template</button>
  </div>
  <div id="two">TWO</div>
</div>

Answer №2

To incorporate a parent div with position:relative, simply include the style attribute "position: relative;" within the opening div tag. Alternatively, you can add position:relative directly to the body tag.

<div style="position: relative;">
<div id="one" class="row">
    <div id="textValue"><span id="text">ONE Inner text</span><span id="icon"><i class="fa fa-angle-up"></i></span></div>    
  <button id="template" class="btn primary">Template</button>
</div>
  <div id="two">TWO</div>
</div>

Answer №3

To ensure that the position absolute is relative to a specific element, it must be relative to something else. In this scenario, it is relative to the document which has default margin and padding. Consider implementing the following solution:

<div class="container">
  <div id="one" class="row">
    <div id="textValue"><span id="text">ONE Inner text</span><span id="icon"><i 
class="fa fa-angle-up"></i></span></div>    
  <button id="template" class="btn primary">Template</button>
</div>

  <div id="two">TWO</div>
</div>

Additionally, include the following CSS:

.container {
  position:relative;
}

Answer №4

Within your specific scenario, the content value inside element #one is calculated at 63%, representing 63% of the total space within #one div.https://example.com/image.png On the other hand, div #two has been assigned an absolute position without a parent element having relative positioning, causing it to be positioned with respect to the larger body element rather than #one div. This difference becomes apparent even when both elements are given the same width.

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

When using jQuery to add an item to a List, it disappears immediately after

I am facing an issue with the code I have. Whenever I click on the "Add" button to add an item, it briefly appears in the list but then disappears. I'm having trouble figuring out why this is happening. $(document).ready(function() { $("#submitB ...

Can you explain the variation between a standard javascript integer and one obtained from jquery.val()?

Utilizing a script known as countUp.js, I am able to increment an integer in a visually appealing manner until it reaches the desired value. This is how I have implemented the code: HTML: <h2 id="countUp-1">2500</h2> JS var theval = 5000; va ...

What is the source of the compiler options in tsconfig.json?

Currently utilizing Typescript in NestJs, I have incorporated various packages. However, the specific package responsible for altering these settings remains unknown to me: "checkJs": false, "skipLibCheck": true Is there a method to ...

Challenges arise with CSS alignment when adding d3.js charts to a webpage

I'm puzzled by the empty space that appears between the left column (highlighted in the image) and the header. This peculiar gap only seems to occur when the middle column is filled with a chart. I've scrutinized the code using Chrome Developer t ...

Effortlessly showcase JSON data in an HTML owl carousel

Is there a way to display JSON data in HTML format? I have a JSON file containing reviews from Facebook, and I would like to showcase them on my website. Each review should be placed in its own div element. The JSON data below is extracted from the Faceboo ...

Steps to hide a div with jQuery when a user clicks outside of a link or the div itself:1. Create a click event

Here's a simple question - I have a link that when clicked, displays a div. If the user clicks away from the link, the div is hidden, which is good. However, I don't want the div to be hidden if the user clicks on it. I only want the div to disap ...

AngularJS can easily interpret and extract information from HTML code

As an example, I have dynamically generated HTML on my webpage like this: <ul> <li>Country</li> <li>State</li> <li>City</li> </ul> I am looking to send this information to the database after clicking a b ...

Creating Images that appear optimized on smaller screens - the art of responsive design!

Currently, I am in the process of working on this test page located at the following link: While the page appears fine on my laptop screen, it is displaying poorly on my phone's browser. The images, in particular, appear disorganized and messy. Coul ...

How can I create a tooltip function in JavaScript/jQuery that uses the "this" keyword?

JSFiddle link: http://jsfiddle.net/lustre/awpnd6L1/1/ I am curious if it's possible to create a JavaScript function that consolidates the mouseenter code for a "More Info" tooltip. Rather than copying the code multiple times, is there a way to stream ...

How to successfully send data props from child components to parent in Vue3

I am currently working on a personal project to add to my portfolio. The project involves creating a registration site where users can input their personal data, shipping information, and then review everything before submission. To streamline the process ...

Is it possible to refresh the webpage in Angular when the tab is clicked?

Can someone help me find a solution to reload an Angular app's page when the user selects the browser tab? I've been exploring using window.location.reload() for this purpose, but I need guidance on triggering it specifically when the tab is sel ...

The use of e.preventDefault in Ajax/jQuery is stopping the page from refreshing and preventing the form

Currently, I am experimenting with using ajax/jQuery/php/html to submit my form without reloading the page. If I include e.preventDefault(), the page remains static and the form does not get submitted. When I remove e.preventDefault(), the form gets submi ...

Enhance the responsiveness of a ReactJS landing page

We have developed a large React application without relying on any existing UI framework. All of our UI components have been custom-built. Now, we are looking to make the landing page section responsive within the application, which will require the imple ...

Clarity of visual in a lattice

I'm encountering a small issue with my ExtJS 4.2 MVC application that involves grid and image transparency. Below is a snippet of my grid setup: Ext.define('XProject.view.message.inbox.Grid', { extend: 'Ext.grid.Panel', al ...

define` module root path

Currently, I am working with Typescript and my source files are located in the src directory. After transpiling, Typescript generates the output in the lib folder. This means that when I need to import components from my package, I have to specify the full ...

Are the results displayed in a vertical array format?

Being new to this world, I would greatly appreciate any assistance! I am working with Bootstrap checkboxes and trying to print them using jQuery's window.print function. However, the issue I am facing is that the array I create from the checkboxes d ...

What is the best way to cut and combine multiple array elements in the right positions?

let result = response.data; console.log(result); const newTemp = result.ssps_with_scated.splice(5,1).concat(result.ps_with_ed.splice(2,1))[0]; result.ps_with_ed.push(newTemp); After multiple attempts, I finally achieved my goal. However, the array values ...

Looking to introduce Vue.js into an established SSR website?

Can Vue be used to create components that can be instantiated onto custom tags rendered by a PHP application, similar to "custom elements light"? While mounting the Vue instance onto the page root element seems to work, it appears that Vue uses the entire ...

I'm noticing that my Tailwind styles don't take effect until I redefine them. What could be causing

My Tailwind classes are giving me trouble. I faced an issue when I created a new component in the directory and placed my Button component there. Whenever I restart the project in terminal, the styles do not apply to my button unless I manually define th ...

When using Webpack, there may be difficulties resolving relative path import of express static files

I am currently developing an Outlook add-in with an Express server running. To ensure compatibility with Outlook Desktop, I need to transpile JavaScript to ES5 using Webpack. Below is the simplified structure of my project: /public /javascripts ssoAu ...