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

Question

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?

javascript jquery html css

Answer 1

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

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 3

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 4

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 5

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 6

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 7

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.

Answer 8

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.

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

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

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

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

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

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

Effortlessly showcase JSON data in an HTML owl carousel

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

AngularJS can easily interpret and extract information from HTML code

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

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

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

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

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

Enhance the responsiveness of a ReactJS landing page

Clarity of visual in a lattice

define` module root path

Are the results displayed in a vertical array format?

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

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

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

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