Make an absolute parent Div Width equal to the total absolute child Div's Width

Question

What I want to do is not fit the childs inside the parent, not want the children to be responsive I just want the parent fit the overall fixed width of his childs to then center it properly

What I'm trying to do is:

A widget that can be centered regardless of the contents inside, so if there are 5 childs appears centered, if there's 10 stills centered

I'm trying to make a "responsive" div with a dynamically created div childs, with those being absolute because they need to overlap themselves a bit

The thing is, the parent doesn't seem to detect their childs at all when putting them on absolute

I know this is somewhat possible because when using overflow the parent knows somehow the overall width

Is there any way to make the outer parent div 's width equal to the total's width of their childs?

Have been searching all damn morning reviewing lots of questions and none seemed to answer that, I'm aware that most surely this is not the better approach for this and will be kindly grateful knowing other methods

What I've GOT:

 .grandparent{ position: absolute; width: 100%; height: 50%; bottom: 0; border: solid; }.parent { position: absolute; width: 90%; height: 85%; top: 50%; left: 50%; transform: translate(-50%, -50%); border: red solid; }.child { position: absolute; width: 100px; height: 150px; border: blue solid; }

 <div class="grandparent"> <div class="parent"> <div class="child" style="transform: translate(0em, 16px) rotateZ(-20deg) rotateY(0deg);"></div> <div class="child" style="transform: translate(3.6em, 21px) rotateZ(-10deg) rotateY(0deg);"></div> <div class="child" style="transform: translate(7.2em, 25px) rotateZ(0deg) rotateY(0deg);"></div> </div> </div>

I want to put the Parent (red square) Centered Horizontally , no matter whats inside because childs count may vary

Answer 1

I have finally found the solution without removing the absolute positioning from my child elements !

Used overflow to then be able to get the total width of the children with scrollWidth

var A = document.getElementById('parent').scrollWidth

And knowing the true width of the parent's div I can then center it properly without further problems

$('#parent').width(A); or document.getElementById('parent').style.width = A + "px";

Workin' Snippet

 var parent = document.getElementById('parent'); parent.style.width = parent.scrollWidth + "px"; var parent2 = document.getElementById('parent2'); parent2.style.width = parent2.scrollWidth + "px";

 .body { height: 500px;}.grandparent{ position: absolute; width: 100%; height: 200px; top: 0; border: solid; }.parent { position: absolute; height: 100%; overflow: visible; top: 50%; left: 50%; transform: translate(-50%, -50%); border: red solid; }.child { position: absolute; width: 100px; height: 150px; border: blue solid; }.grandparent2{ position: absolute; width: 100%; height: 200px; top: 200px; border: solid; }.parent2 { position: absolute; height: 200px; overflow: visible; top: 50%; left: 50%; transform: translate(-50%, -50%); border: red solid; }.h41, .h42 { position: absolute; left:20px; }.h41 { top: 20px; }.h42 { top: 220px;}

 <h4 class="h41">Centered with 5 Childs</h4> <div class="grandparent"> <div id="parent" class="parent"> <div class="child" style="transform: translate(0em, 16px) rotateZ(-20deg) rotateY(0deg);"></div> <div class="child" style="transform: translate(3.6em, 21px) rotateZ(-10deg) rotateY(0deg);"></div> <div class="child" style="transform: translate(7.2em, 25px) rotateZ(0deg) rotateY(0deg);"></div> <div class="child" style="transform: translate(11em, 21px) rotateZ(10deg) rotateY(0deg);"></div> <div class="child" style="transform: translate(15.2em, 25px) rotateZ(20deg) rotateY(0deg);"></div> </div> </div> <h4 class="h42">Centered with 2 Childs</h4> <div class="grandparent2"> <div id="parent2" class="parent2"> <div class="child" style="transform: translate(0em, 16px) rotateZ(-10deg) rotateY(0deg);"></div> <div class="child" style="transform: translate(5em, 21px) rotateZ(10deg) rotateY(0deg);"></div> </div> </div>