Extend Div Into Parent Without Negative Margins

Question

I would like to have a child div extend to be the same width as it's parent's parent. So with HTML structure like this:

<div class="pp">
  <div class="p">
    <p>
    Some text
    </p>
    <div class="c">
      This is the thingy!
    </div>
    <p>
    Some more text
    </p>
  </div>
</div>

I would like div.c to extend to the borders of div.pp.

I know this is possible with negative margins, but in my situation I am not aware of the margins of div.pp beforehand. I'm aware I could write some JavaScript to do this, but I am interested in a CSS only solution. I'm also aware that changing the structure of the HTML could solve this problem, however that is also not an option.

Here is fiddle illustrating the HTML and some helpful CSS:

https://jsfiddle.net/y37mLkzu/1/

There is an example there of fixing this with negative margins.

Unfortunately, given the contraints you have in place, JS is the only answer (CSS Custom Properties AKA CSS Variables aside). — Paulie_D, Jun 06 '17 at 14:33
**Unless** this is for purely visual effect, in which case you might be able to fake something with a pseudo-element. I see someone has just pointed out that option. Something along these lines - https://stackoverflow.com/questions/28565976/css-how-to-overflow-from-div-to-full-width-of-screen?lq=1 — Paulie_D, Jun 06 '17 at 14:35
@Paulie_D That is not a totally unexpected outcome for this case. Thanks for taking a look. — thatidiotguy, Jun 06 '17 at 14:59

WizardCoder · Accepted Answer · 2017-06-06T14:40:55.810

I am not sure if this will work in your situation, but it is the only other way without using a fixed minus margin and only using pure CSS. I have added :before and :after to .c and absolute positioned them at either side of the .c element. I have also added overflow hidden to the .pp wrapper to cut off the excess absolute positioned elements.

p {
  margin:0;
}
.pp {
  padding: 0 6px 0 6px;
  width: 100px;
  background-color: black;
  overflow: hidden;
}
.p {
  background-color:white;
}
.c {
  background-color:red;
  position: relative;
}
.c:before, .c:after {
  content:"";
  position: absolute;
  top:0;
  background: red;
  height:100%;
  width:100%;
} 
.c:before {
  left:-100%;
}
.c:after {
  right:-100%;
}

<div class="pp">
  <div class="p">
    <p>
    Some text
    </p>
    <div class="c">
      This is the thingy!
    </div>
    <p>
    Some more text
    </p>
  </div>
</div>

This is exactly the type of solution I was looking for. I did not even think to use pseudo elements. Great job, and thank you. — thatidiotguy, Jun 06 '17 at 15:02

score -1 · Answer 2 · answered Jun 06 '17 at 13:32

-1

Cant you use positions? Just curious to know. If I use position:absolute, it will work.

answered Jun 06 '17 at 13:32

Archana

103
6

Could you provide an example? This seems more like a comment than an answer. How would I use `position` to solve this problem exactly? – thatidiotguy Jun 06 '17 at 13:41
I was trying like this: .c {position:absolute; left:8px} – Archana Jun 06 '17 at 13:44
That does not work at all for several reasons: 1) It extends over the border of .pp to the right. 2) It requires you to hardcode an amount based on the padding value of .pp which is against the requirements I outlined. https://jsfiddle.net/y37mLkzu/2/ – thatidiotguy Jun 06 '17 at 13:49

Extend Div Into Parent Without Negative Margins

2 Answers2