I currently have 3 different divisions within the body of my document: a container, a parent, and a child element.
My goal is to make the child element extend beyond its parent on the left side.
However, when I try to achieve this by using position: absolute, the parent does not adjust its height as intended...
position: static
position: absolute
Even using margin-left: -20px doesn't solve my issue: in reality, I will have nested parents and I want all children to extend outwards on the left side.
This is what my code looks like at the moment:
#container {
position: absolute;
width: 300px;
}
.parent {
margin-left: 20px;
}
.child {
padding: 30px;
}
Is there a way to accomplish this purely with CSS?
Edit: Below is a snippet of the HTML code to illustrate how the parent elements will be nested:
<div id="container">
<div class="parent">
<div class="child"></div>
<div class="parent">
<div class="child"></div>
</div>
</div>
<div class="parent">
<div class="child"></div>
</div>
</div>
Edit 2: It's important to note that there are multiple levels of nesting in my structure. The provided HTML snippet only shows a small portion of it.