Content within full width element should be containerized

Question

When I speak of "container", it is an element defined like so

.container {
  width: 90%;
  max-width: 1000px;
  margin: 0 auto;
}

this is applied on multiple occasions with the goal that most elements should have the same left and right bound for large screens. For the matter of this questions, please disregard smaller views than desktop.

The problem I have is when I want a full width element that is divided into two columns. And the contents of these 2 columns should adhere to the same left and right boundaries, so only the background is full width but their content not.

My current code results in something like this

and it should look like this

(In the actual code, the left element has an image instead of background-color, so I can't fake the background with gradient or similar.)

I tried various things and a) don't know how to properly search for this and b) can't figure it out on my own.

Attached is a working example of the current code. The markup is not set in stone, so feel free to add elements.

header {
  box-shadow: 0 0 0.3125rem 0 rgba(28, 39, 44, 0.5);
}

.container {
  width: 90%;
  max-width: 300px;
  margin: 0 auto;
}

header>.container {
  display: grid;
  grid-template-columns: auto auto;
}

header>.container>*:last-child {
  text-align: right;
}

p {
  text-align: justify;
}

.alignfull {
  width: 100%;
  max-width: unset;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
}

#left {
  background-color: #eee;
  grid-column-end: span 7;
}

#right {
  background-color: #aaa;
  grid-column-end: span 5;
}

<header>
  <div class="container">
    <div>first left aligned</div>
    <div>last right aligned</div>
  </div>
</header>
<div id="main">
  <div class="alignfull">
    <div id="left">
      <div id="left-element">
        Hello World
      </div>
    </div>
    <div id="right">
      <div id="right-element">
        Lorem ipsum dolor sit amet,
      </div>
    </div>
  </div>
  <div class="container">
    <p>
      Cupcake ipsum dolor sit amet lemon drops tart halvah. Cookie brownie cupcake icing oat cake. Ice cream pie lemon drops ice cream caramels wafer jujubes carrot cake. Liquorice cheesecake topping danish. Toffee sweet pie gummi bears biscuit dessert topping.
      Macaroon gingerbread chocolate cake macaroon danish tart cheesecake danish cheesecake. Powder candy canes candy canes liquorice muffin cake gummies. Chupa chups pudding tart sesame snaps fruitcake cotton candy chocolate.
    </p>
  </div>
</div>

UPDATE: I'm sorry if I was unclear, however the other answers are not helpful in this context. The problem are the 2 columns.

Having the outer element 100% and placing a .container inside messes up the columns. (I hope this explanation is clear, if not, please comment)

I don't know if the "duplicate" answer is really helpful for the OP with the special requirement of two columns. One solution for this specific case would be to add a calculated padding of `calc((100vw - 300px) / 2)` to the left side of the left box and the right side of the right box. — Constantin Groß, Jun 07 '19 at 09:55
@Connum You're right, the other answers are not helpful. I added more info hoping to make it clear. Why do you have the `/2` in the example code? — kero, Jun 07 '19 at 10:11
You take the full width of the page (100vw) minus the size of the middle column (300px), and then you cut it in half in order to divide the left and right space equally. — Constantin Groß, Jun 07 '19 at 10:16
@Connum Genius! That works really well, thank you. I need to use `calc()` more to get used to it for cases like this. I hope the question gets reopened so you can add it as an answer. If not, I'll probably delete the question — kero, Jun 07 '19 at 10:30

score 1 · Accepted Answer · answered Jun 17 '19 at 07:06

As per the comments, you can add calc((100vw - 300px) / 2) as padding-left of the left column and padding-right of the right column to achieve this. This formula is taking the full width of the page (100vw) minus the size of the middle column (300px), and cutting the remaining width in half in order to divide the left and right space equally.

html, body {
margin: 0;
padding:0;
}

header {
  box-shadow: 0 0 0.3125rem 0 rgba(28, 39, 44, 0.5);
}

.container {
  width: 90%;
  max-width: 300px;
  margin: 0 auto;
}

header>.container {
  display: grid;
  grid-template-columns: auto auto;
}

header>.container>*:last-child {
  text-align: right;
}

p {
  text-align: justify;
}

.alignfull {
  width: 100%;
  max-width: unset;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
}

#left {
  background-color: #eee;
  grid-column-end: span 7;
  padding-left: calc((100vw - 300px) / 2);
}

#right {
  background-color: #aaa;
  grid-column-end: span 5;
  padding-right: calc((100vw - 300px) / 2);
}

<header>
  <div class="container">
    <div>first left aligned</div>
    <div>last right aligned</div>
  </div>
</header>
<div id="main">
  <div class="alignfull">
    <div id="left">
      <div id="left-element">
        Hello World
      </div>
    </div>
    <div id="right">
      <div id="right-element">
        Lorem ipsum dolor sit amet,
      </div>
    </div>
  </div>
  <div class="container">
    <p>
      Cupcake ipsum dolor sit amet lemon drops tart halvah. Cookie brownie cupcake icing oat cake. Ice cream pie lemon drops ice cream caramels wafer jujubes carrot cake. Liquorice cheesecake topping danish. Toffee sweet pie gummi bears biscuit dessert topping.
      Macaroon gingerbread chocolate cake macaroon danish tart cheesecake danish cheesecake. Powder candy canes candy canes liquorice muffin cake gummies. Chupa chups pudding tart sesame snaps fruitcake cotton candy chocolate.
    </p>
  </div>
</div>

Content within full width element should be containerized

1 Answers1