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

What are the best ways to integrate markdown into my Vue.js projects?

Building a matrix of checkboxes

The property 'clone' is undefined and cannot be read

Show one class with Jquery, hide the rest - a jsfiddle is linked below for

Encountering a Jquery 404 error while attempting to locate a PHP file through Ajax requests

Getting a Next.js error after performing a hard refresh on a page that contains a dynamic query

Stop users from signing up if the chosen username is already in use

Develop a program in Python using Selenium to automate web scraping in a loop

Guidance on establishing an Array data type for a field in GraphQL Type declarations

Could you provide suggestions on how to update the content of an HTML tag within a Vue component?

Having trouble getting Emberjs to properly handle an Ajax POST request

What is the most foolproof method for detecting when a checkbox has been marked as checked, regardless of the circumstances?

What is causing the colorful background to not fully cover my page when I make the window smaller?

Struggling with the navbar-toggler in Bootstrap 4 Beta 2?

Issues with loading NextJS videos can occur when accessing a page through a link, as the videos may fail to load without

Having trouble pinpointing the element with protractor's binding locator

Developing web applications using Express.js and Jade involves connecting CSS stylesheets

PHP: Communicating Data with JavaScript

eliminate whitespace characters within a string

Where is the appropriate location to insert a <script> tag in NextJs?