17 private links
«Docker MUST NOT run any databases in production, EVER.»
«The docker hype is not only a technological liability any more, it has evolved into a sociological problem as well.»
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.
<!-- begin snippet: js hide: false -->
<!-- language: lang-css -->
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;
}
A more modern solution to this question is to use the viewport unit vw
and calc()
.
Set the width
of the child element to 100% of the viewport width, or 100vw
. Then move the child element 50% of the viewport width – minus 50% of the parent element's width – to the left to make it meet the edge of the screen.
.child-element {
position: relative;
width: 100vw;
left: calc(-50vw + 50%);
}
With this, the position
type of the parent element doesn't matter and the child element is still part of the content flow.
Browser support for vw and for calc() can generally be seen as IE9+.
Note: This assumes the box model is set to border-box
. Without border-box
, you'll also have to subtract paddings and borders, making this solution a mess.