20

So basically what I want to do is have a div or two on a page that is larger than its parent div. Normally I would restructure the whole website however that would be a large task.

The reason I don't want them to be position absolute is that the container heights will then be screwed up and it will cause the position absolutes to overlap some divs.

The reason for the two divs being larger than their parent divs is they must be the width of the browser when the container divs can be no larger than 1200px.

Rambomst
  • 653
  • 2
  • 10
  • 28

3 Answers3

47

Yes!

Not only that, we can do one better by using vw and calc.

Simply set the width of the child elements to be 100% of the viewport width by using vw (percentage viewport units), and then set their left margin to a negative calculated value based on this, minus the width of the wrapper. Other than the optional max-width of the parent, everything else is calculated automatically. You can dynamically change the width of the parent container, and the children will automatically resize and align as needed, without being positioned.

body,
html,
.parent {
  height: 100%;
  width: 100%;
  text-align: center;
  padding: 0;
  margin: 0;
}
.parent {
  width: 50%;
  max-width: 800px;
  background: grey;
  margin: 0 auto;
  position: relative;
}
.child {
  width: 100vw;/* <-- children as wide as the browser window (viewport) */
  margin-left: calc(-1 * ((100vw - 100%) / 2));/* align left edge to the left edge of the viewport */
  /* The above is basically saying to set the left margin to minus the width of the viewport MINUS the width of the parent, divided by two, so the left edge of the viewport */
  height: 50px;
  background: yellow;
}
<div class='parent'>
  parent element
  <div class='child'>child element</div>
</div>
SW4
  • 69,876
  • 20
  • 132
  • 137
  • 1
    Excellent solution and just what I was looking for. You've saved me a lot of hassle with this elegant solution. – Steve Price Nov 17 '16 at 13:48
  • Great helped brother.. u don't know how much big trouble of mine you have resolved. thank a bunch. – JD_bravo Nov 10 '17 at 13:26
  • Nice solution. Poor thing is this answer is not popular (view, upvotes ...) than "position absolute" answer here https://stackoverflow.com/questions/5581034/is-there-are-way-to-make-a-child-divs-width-wider-than-the-parent-div-using-css – hqt Nov 16 '17 at 19:15
1

You can also use margins to achieve this: http://jsfiddle.net/MEc7p/1/

div{
outline: 2px solid red;
}
#outer{
width: 200px;
height: 400px;
}
#inner{
width: 600px;
height: 200px;
margin: 0 -20px;
outline: 1px solid green;
}
Pat Dobson
  • 3,249
  • 2
  • 19
  • 32
0

Try this fiddle

http://jsfiddle.net/stanze/g2SLk/

.wrapper {
    width: 400px;
    border: 1px solid #f00;
    min-height: 153px;
}
.wrapper-child-1 {
    float: left;
    border: 1px solid #ccc;
    width: 195%;
    min-height: 262px;
}

<div class="wrapper">
  <div class="wrapper-child-1"> </div>
</div>
stanze
  • 2,456
  • 10
  • 13