Extend a wrapped div to full screen width outside it’s wrapper
A very common design model for websites in fluid/reponsive design is to make a centered container taking up for example 80% of the screen width. It is not very unusual that the designer then wants the background on a header, footer, horizontal menu or any other similar object to have it’s background extended to the fulls screen width.
Website with wrapper container
The problem with this quickly becomes pretty obvious as all objects are contained in a 80% wrapper. One solution is of course to close the wrapping container, then create a full width object with the background and the begin a new wrapper.
However, there is a neat trick that can be used to make an object “break out” outside the containing wrapper. It is done by using negative margins. To not get a horizontal scrollbar in the browser we add overflow-x: hidden to the body.
This is an example how to do it (click here to view the example live):
<html>
<head>
<style>
body {
overflow-x: hidden; /* to prevent horizontal scroll bars */
}
.container {
width: 80%;
height: 100%;
margin-left: auto; /* center the container */
margin-right: auto;
padding: 10px; /* some padding inside the container */
background-color: yellow;
}
.divider {
line-height: 30px;
background-color: grey;
color: white;
margin-left: -1000%;
margin-right: -1000%;
padding-left: 1000%; /* push content back in on the screen */
padding-right: 1000%;
}
</style>
</head>
<body>
<div class="container">
<p>Some text inside the container</p>
<div class="divider">Here is a section divider in full width</div>
</div>
</body>
</html>
