Remove an element from the forced width that the parent container is applying to the element

Question

How do I remove an element from the forced width that the parent container is applying to the element?

<div id="container"> <!-- This div is forcing the site to be 960px width. Also It holds all the content that the site has -->
  <div id="extra"> <!-- I would like to make this div responsive full width so that the image that the div holds will always be stretched from browser's left border to the right border  -->
    <img src="orange.jpg">
  </div>
</div>

I can't edit the css of the original site. That is why I can't modify the code which holds the .container in its proportions. I can only add css to the site.

I've been trying to use different position commands but they didn't seem to bring the desired solution. I couldn't get the image span from left to right.

Which solutions I could use to solve this problem. I can only use css. I'm working with WordPress and PageBuilder by SiteOrigin plugin.

Answer 1

Based on what your .container div and its parent elements have when it comes to positioning and overflow, here is 2 samples. a sample you can use to support older browsers. For newer ones, check the "duplicate" question's answer CSS - how to overflow from div to full width of screen.

Todo: Add your image back as I removed it to show the div's only.

The first This uses position: absolute (use this if to target older browsers) and will work if none of the parent elements have positioning like position: relative/position: absolute or have a smaller width than the viewport combined with overflow: hidden.

The .wrapextra was added to make the absolute positioned div flow with the content.

Edit

If there is content that should appear after the .extra div, you need to set a fixed height on the .wrapextra which matches the content height of the .extra div to properly "push" content down.

If no fixed height can be set a small script is needed to calc and set it dynamically and here is a demo for that: Fiddle Demo

html, body {margin: 0}
#container {
    width: 960px;
    margin: 0 auto;
    background-color: #ddd;
}
#wrapextra {
    background-color: #f99;
}
#extra {
    position: absolute;
    left: 0;
    right: 0;
    min-width: 960px;
    height: auto;
    background-color: #ff9;
}

<div id="container">
  This div is forcing the site to be 960px width.<br/>
  Also It holds all the content that the site has
  <div id="wrapextra">
    <div id="extra">
      I would like to make this div responsive full width so that the image that the div holds will always be stretched from browser's left border to the right border
    </div>
  </div>
</div>

The second uses "viewport units" (still quite good browser support, IE9 and up) and will work if none of the parent elements have a smaller width than the viewport combined with overflow: hidden.

Also if any parent have positioning like position: absolute this might also make this sample not to work.

The @media query was added to make the extra div stretch when the viewport's width gets bigger than 960px.

html, body {margin: 0}
#container {
    width: 960px;
    margin: 0 auto;
    background-color: #ddd;
}
#extra {
    background-color: #ff9;
}
@media (min-width: 960px) {
  #extra {
    position: relative;
    left: 50%;
    margin-left: -50vw;
    width: 100vw;
  }
}

<div id="container">
    This div is forcing the site to be 960px width.<br/>
    Also It holds all the content that the site has
    <div id="extra">
        I would like to make this div responsive full width so that the image that the div holds will always be stretched from browser's left border to the right border
    </div>
</div>