Extend child div beyond container div

Question

I'm trying to expand this div across with width of the browser. I've read from here that you can use {position:absolute; left: 0; right:0;} to achieve that as in the jsfiddle here: http://jsfiddle.net/bJbgJ/3/

But the problem is that my current #container has a {position:relative;} property, and hence if I apply {position:absolute} to the child div, it would only refer to #container. Is there a way to still extend my child div beyond the #container?

Carioca

If it's being absolutely positioned relative to the body anyway, is there any reason you can't bring the element outside of the current parent? Also, seeing your specific code and application could help us out as well... – Oden

FWIW, I found the solution I needed on this sister question - #31391959 – Kerby

Answer 1

I can think of five ways to potentially accomplish your goal:

1. Use negative margins on the inner element to move it outside of the parent

2. Use Javascript to move the inner element outside of the parent.

3. Change the source code and move the inner element outside of the parent.

4. Use position: fixed on the inner element. This will allow the inner element to break out but has the down side that the element will be fixed at the given position (never moving).

5. Remove the position: relative; from the parent element or give the parent element a position: static

Debra

Answer 2

You can try adding overflow:visible to the parent div, then making the child wider than the parent.

Windham

Answer 3

Even though this is 10 years old, it was stil the first thing that came up when i was looking for an answer for this. Figured someone else could use solution i ended up using:

.parent {
  background-color: purple;
  max-width: 80vw;
  margin: auto;
  height: 500px
}
.child {
  width: 100vw; 
  margin-left: calc((-100vw + 100%) / 2);
  margin-right: calc((-100vw + 100%) / 2);
  background-color: green;
}

<div class='parent'>
<div class='child'>I've outgrown my parent</div>
<div>

Setup on parent is just an example. Child has 100 viewport width and negative margins and then calculated taking the difference in width of the container (the parent) and the viewport and dividing that by two, so that it's equally distributed between right and left margin.

Dilley

Answer 4

None of the answers above mention the best way of doing this, using position:relative on the full width container and position:absolute;left:0;width:100%; on div inside that is inside any centralised/offset div, as long as no other containers have declared position:relative, this will work.

Lactic

Answer 5

Parent to position:static, child to position:absolute or

Parent to position:relative, child to position:fixed (with the fixed, never moving downside)

Your left: 0; right:0; works with both of these solutions, just note that your child div will draw on top of any divs below it in code, no matter what the div's display property is set to. You will either have to add a padding-top value to the next div to compensate (simple example in jsfiddle), or another div underneath that has the same height behavior as the child (a much more elaborate example in codepen), which is probably not ideal, but works in simple html/css.

Snow

If you scroll, this won't work. The fixed bar will remain in the same place while the rest of the page scrolls. – Tremann

Answer 6

I had a case where I needed to make a carousel and have it wrap outside of the parent element. You can set the child element to have a width: 100vw and set the parent element to have a max-width of a specific amount of pixels...or a calculated amount. With this setup our child component extends itself beyond the parent. JSFiddle

    .parent {
     // our parent container has 20px margins on each side so we set its max width accordingly
      max-width: calc(100vw - 20px)
    }

    .child {
      // set the child to wrap the entire viewport width. Account for any margins from the parent and offset them with a negative margin
      width: 100vw;
      transform: translateX(-20px);
    }

Badr

Answer 7

Keep it simple:

HTML

<div class="main-container">
    <p>Some content...</p>
</div>
<div class="full-width-container">
    <div class="main-container">
        <p>Some other content...</p>
    </div>
</div>
<div class="main-container">
    <p>Some final content...</p>
</div>

CSS

p {
    margin: 0;
}

.main-container {
    position: relative;
    width: 80%;
    margin: 0 auto;
    height: 200px;
    background-color: green;
}

.full-width-container {
    position: relative;
    width: 100%;
    margin: 0 auto;
    height: 120px;
    background-color: red;
}

Thanks to @Brett's third suggestion!

Kronfeld