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.

When you say the div "extra" should have full width, do you mean full width of the div "container"? — Asons, Oct 27 '15 at 09:37
No, I would like to have div "extra" full width of the browser. Lets say my browser Chrome is open and I'm looking at the site. The browser window width is set to 1500px. I'd like this width to be the width of the div "extra". If I would resize the browser window to eg. 1100px width the "extra" div width should be set accordingly to the 1100px. And while the "extra" div is reseized the "container" div doesn't change is always 960px width. — Konstantin Nikkari, Oct 27 '15 at 09:51

Sam Willis · Answer 1 · 2015-10-27T12:08:29.587

0

You need to structure your html differently for this to work. You need to have the code like below. This will effectively split your container into two, allowing you to have the full width div in between them.

<div class="container">
    content here......
</div>

<div id="extra">
    <img src="orange.jpg">
</div>

<div class="container">
    more content here......
</div>

Just apply width: 100%; to the #extra to get it full width

As pointed out by @LGSon I had duplicate id's. If you swap them for classes and add the styling to the .container to get it to be the same set up as the #container, this should work for you.

edited Oct 27 '15 at 12:08

answered Oct 27 '15 at 09:49

Sam Willis

4,001
7
40
59

I wish i could do that. The element is inside of the WordPress page. And the page is effected by the theme css styling which makes the whole pages max width 960. I'm trying to find a way to somehow get this element (which is inside the WordPress page) to stretch from side to side. – Konstantin Nikkari Oct 27 '15 at 09:57
You can create a page template to use with the split container, or you can add your own stylesheet to add your own css – Sam Willis Oct 27 '15 at 10:05
Good spot, thanks, I'll amend the answer – Sam Willis Oct 27 '15 at 12:09

score 0 · Accepted Answer · edited May 23 '17 at 11:58

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>

Thank you for your answer. I found an easier solution while using the WordPress and PageBuilder by SiteOrigin plugin. While in Page Builder editor choose Edit Row - Layout - Row Layout - Full Width. This will detach the element from forced width and will make it full with to your browser sides. — Konstantin Nikkari, Oct 29 '15 at 13:27

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

2 Answers2