Expand a child div outside parent( having position: relative ) and without negative margins

Question

I'm trying to achieve a scenario in my project wherein I have a parent div which has a margin of some pixels from left and right and then I have a child div inside it. I want the child div to take 100% of the width of the screen.

P.S.: The position of the parent is relative.
I do not want to use negative margins on child div.
Child divs are inside shadowRoot whereas parent div is outside it
I cannot apply position: fixed to child as it will fix it WRT window and I do not want that.

Here is the sample code:

.full-width {
    position: absolute;
    width: 100%;
    left: 0;
    border: 10px red solid
}

.container {
    position: relative;
    max-width: 1440px;
    border: 10px black solid; 
    height:50vh

<div class="container">
    <div class="full-width"></div>
</div>

*I do not want to use negative margins on child div.* --> why? — Temani Afif, Sep 11 '19 at 14:26
Negative margin won't work because the parent div is outside shadowRoot and the child div's are inside shadow root. — Prasheel, Sep 11 '19 at 14:32
in this case show us the real code where there is the shadow root .. your actual code is irrelevant to the description provided — Temani Afif, Sep 11 '19 at 14:34
Possible duplicate of https://stackoverflow.com/questions/6867244/force-position-absolute-to-be-relative-to-the-document-and-not-the-parent-con — Andrew Adam, Sep 11 '19 at 14:34
@TemaniAfif, I'm not allowed to share the actual code due to company policy restrictions — Prasheel, Sep 11 '19 at 14:35
it's about HTML/CSS code, no one is asking you to provide your company code. Simply a code relevant to your description — Temani Afif, Sep 11 '19 at 14:37

score 0 · Answer 1 · answered Sep 11 '19 at 14:35

0

I hope that I understood your request but the only way is to remove position: relative on your .full-width div

Refer to Is there are way to make a child DIV's width wider than the parent DIV using CSS?

https://jsfiddle.net/83gvjsea/

answered Sep 11 '19 at 14:35

Rémy Testa

897
1
11
24

score 0 · Answer 2 · answered Sep 11 '19 at 14:35

0

I believe that you might be looking for a FIXED position instead of ABSOLUTE. Sorry for the colors, but it makes it easy to see how fixed works. However, this might disrupt other features of the site.

Other than this I believe what you are trying to do goes against how layouts are built and how positioning works in the current HTML/CSS web.

body{
  background-color:fuchsia;
}
.full-width {
    position: fixed;
    left:0;
    right:0;
    background-color:yellow;
}

.container {
    position: relative;
    height:200px;
    width:140px;
    background-color:#ddd;
    max-width: 140px;
    padding: 0 10px;
}

<div class="container">
    <div class="full-width">
    hello
    </div>
</div>

answered Sep 11 '19 at 14:35

Andrew Adam

1,572
9
22

https://stackoverflow.com/questions/32652139/css-position-absolute-next-positioned-element-is-body?rq=1 – Andrew Adam Sep 11 '19 at 14:36
https://stackoverflow.com/questions/6867244/force-position-absolute-to-be-relative-to-the-document-and-not-the-parent-con – Andrew Adam Sep 11 '19 at 14:36
I cannot keep the position of the child as fixed because it will be relative to the screen then. – Prasheel Sep 11 '19 at 14:48

Silu K · Answer 3 · 2019-09-11T14:47:36.240

0

<div class="container">
    <div class="full-width"></div>
</div>

.full-width { position: absolute; width: calc(100% - 20px); left: 0; border: 10px red solid } .container { position: relative; max-width: 1440px; border: 10px black solid; height:50vh}

<div class="container">
    <div class="full-width"></div>
</div>

You can give the width of the child container with a calculation based on parent container border width.

.full-width {
 position: absolute;
 width: calc(100% - 20px);
 left: 0;
 border: 10px red solid
}

edited Sep 11 '19 at 14:47

answered Sep 11 '19 at 14:42

Silu K

238
2
13

Did u check the snippet I have posted. For me it is working here. – Silu K Sep 11 '19 at 14:52

Expand a child div outside parent( having position: relative ) and without negative margins

3 Answers3