CODEWITHSUNDEEP
csscss-position
Westerfaq
Westerfaq

Reputation: 89

Stretching an element outside of its parent

I have 3 divs in my body: a container, a parent, and a child.
I'm trying to get the child to extend outside of its parent on the left side.
But if I do so with position: absolute, the parent will not stretch to the desired height...

position: static

position: static

position: absolute

position: absolute

Using a margin-left: -20px will not do either: ultimately, i'll have other nested parents, and need all the children to extend to the outer left.

Hers's my code so far:

#container {
    position: absolute;
    width: 300px;
}

.parent {
    margin-left: 20px;
}

.child {
    padding: 30px;
}

Any way to do this in pure css?

Edit: Here's my html code so you can see how the parents will be nested in each other:

<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: I have to point out there are multiple (infinite) levels of nesting in my code. The html sample above is just a fragment.

Upvotes: 3

Views: 3728

Answers (2)

Satya Dev Yadav
Satya Dev Yadav

Reputation: 175

Use this style:

.stretch-block {
  position: relative;
  left: 50%;
  margin-left: -50vw;
  width: 100vw;
}

It pushes the element to 50% width of the parent container from the left, then pulls it to the viewport's left edge with a negative margin that's 50% of viewport width. Then the element gets a width that's 100% of viewport width.

Upvotes: 2

SW4
SW4

Reputation: 71160

Why not simply use

Demo Fiddle

.child {
    height: 60px;
    position:relative;
    left:-20px;
}

You can use position:relative to also justify content beyond the borders of a parent, so long as overflow:hidden isnt set on the parent.

Upvotes: 2

Related Questions