CSS - how to overflow from div to full width of screen

Question

I have a containing DIV, that I use as part of my responsive grid. It expands to the maximum width I allow which is 1280px, then margins appear for large devices. Here's my CSS + a bit of Less.

.container
{
    margin-left:auto;
    margin-right:auto;
    max-width:1280px;
    padding:0 30px;
    width:100%;

    &:extend(.clearfix all);
}

However on some occasions I'd like to overflow sideways - lets say I have an background image or colour that needs to be full width. I'm not great at CSS - but is it possible to achieve what I want?

Answer 1

The most obvious solution is just to close the container...have your full width div then open a new container. The title 'container' is just a class...not an absolute requirement that it hold everything all at the same time.

In this instance you apply the background color to the full width div and you don't need to apply a color to the internal, restricted div.

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
.container {
  max-width: 80%;
  border: 1px solid red;
  margin: 0 auto;
}
.fullwidth {
  background: orange;
}
header {
  height: 50px;
  background: #663399;
}
.mydiv {
  /* background: orange; */
  min-height: 50px;
}
footer {
  height: 50px;
  background: #bada55;
}

<div class="container">
  <header></header>
</div>
<div class="fullwidth">
  <div class="container">
    <div class="mydiv">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum illum veniam in delectus corrupti autem magnam. Tenetur ducimus provident nisi aut esse aliquid accusamus quas.</p>
    </div>
    <div class="mydiv">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum illum veniam in delectus corrupti autem magnam. Tenetur ducimus provident nisi aut esse aliquid accusamus quas.</p>
    </div>
  </div>
</div>
<div class="container">
  <footer></footer>
</div>

However, for some they like a single all encompassing container so if all you are after is a background you could use a pseudo-element like so:

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
body {
  overflow-x: hidden;
}
.container {
  max-width: 80%;
  border: 1px solid red;
  margin: 0 auto;
}
header {
  height: 50px;
  background: #663399;
}
.mydiv {
  height: 100px;
  position: relative;
}
.mydiv:after {
  content: "";
  position: absolute;
  height: 100%;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  background: orange;
  z-index: -1;
}
footer {
  height: 50px;
  background: #bada55;
}

<div class="container">
  <header></header>
  <div class="mydiv">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum illum veniam in delectus corrupti autem magnam. Tenetur ducimus provident nisi aut esse aliquid accusamus quas.</p>
  </div>
  <footer></footer>
</div>

Support for vw is IE9+ - See http://caniuse.com/#feat=viewport-units

There are cases where actual content is required in the 100% wide div and the container cannot be opened/closed at will (perhaps to retrofit a slider).

In those cases, where the height of the new div is known the same technique can be used to position it as to be 100% viewport wide:

* {
  margin: 0;
  padding: 0;
}
body {
  overflow-x: hidden;
}
.container {
  max-width: 80%;
  border: 1px solid red;
  margin: 0 auto;
}
header {
  height: 50px;
  background: #663399;
}
.mydiv {
  height: 100px;
  position: relative;
}
.myslider {
  position: absolute;
  height: 100%;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  background: orange;
}
footer {
  height: 50px;
  background: #bada55;
}

<div class="container">
  <header></header>
  <div class="mydiv">
    <div class="myslider">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum illum veniam in delectus corrupti autem magnam. Tenetur ducimus provident nisi aut esse aliquid accusamus quas.</p>
    </div>
  </div>
  <footer></footer>
</div>

JSfiddle Demo

Note: there are instances where 100vw can cause overflow and a horizontal scrollbar might appear. overflow-x:hidden on the <body> can attend to that..it should not be an issue because everything else is still inside the container.

Answer 2

I found this super useful trick by using vw on margins (Source)

Example :

.inner-but-full {
   margin-left: calc(-50vw + 50%);
   margin-right: calc(-50vw + 50%);
}

Demo :

html,body {
  overflow-x: hidden; /* Prevent scrollbar */
}

.inner-but-full {
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
  height: 50px;
  background: rgba(28, 144, 243, 0.5);
}

.container {
  width: 300px;
  height: 180px;
  margin-left: auto;
  margin-right: auto;
  background: rgba(0, 0, 0, 0.5);
}

<div class="container">
  <div class="inner-but-full"></div>
</div>

Can I use :

http://caniuse.com/#feat=calc

http://caniuse.com/#feat=viewport-units