CSS: position absolute varying the div width

Question

I am having the following div structure in a part of my site. There are two divs one below another. The first div is divided into two elements. One div ( 63% ) and a button.

Below this, there is another div which is having same 63% as width and position as absolute.

Having the position as absolute not resulting in the two divs with the same width in the same size.

A part of CSS code

#two{
  border: 1px solid;
  width: 63%;
  position: absolute; //Enabling this resulting in varying size even width  is same
}

This is my code pen link, https://codepen.io/JGSpark/pen/bZyvEV?editors=1100

I would like to have two divs in the same size as the position absolute. Is there something I can try out here?

Answer 1

When you add position: absolute not relative to any element it is positioned relative to the root element.

A 63% textValue is 63% of #one element but 63% of #two is 63% of the document which includes the default body margin . So reset this to zero:

 body { margin: 0; /* 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 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> 

Or you can add a wrapper to the element which has position: relative - see 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

We able to add parent div with position:relative. Or Just add position:relative to 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

Position absolute need to be relative to something, in this case it is relative to the document which has default margin and padding. Try this:

<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>

in css add:

.wrapper {
  position:relative;
}

Answer 4

In your case the #textValue that is inside #one is 63% that is 63% of #one div. where as the #two div is given absolute without giving a parent element position relative so it is taking relative to body element that is comparatively bigger than the #one div so you able to see the difference even though you have given a same width.