So I'm having this issue, I'm coding a basic website using NextJS, this is an example of my code
I have a set of div like this with relative positioning
<div>one</div>
<div>two</div>
<div>three</div>
output it looks something like this
one two three
Now I want to wrap all 3 divs inside another div with absolute positioning so I can change its position freely across the screen
<div>
<div>one</div>
<div>two</div>
<div>three</div>
</div>
But doing that will change inner div layout to this
one
two
three
So basically, how do I wrap multiple divs inside another div without changing inner div position?
Try this in your CSS code for the inner divs:
display: inline-block;
and this for the outer div:
width: fit-content;
Something like this:
.parent{
position: absolute;
bottom: 0px;
}
.child{
display: inline-block
}<div class="parent">
<div class="child">One</div>
<div class="child">Two</div>
<div class="child">Three</div>
</div>