[css-backgrounds] Full Width Background with Fixed W... | w3c/csswg-drafts

Nobody has claimed this yet.

Is it possible with pure CSS to achieve the following?

<html>
  <head>
    <title>Full Width Background with Fixed Width Content</title>
    <link rel="stylesheet" type="text/css" href="index.css" media="screen" />
  </head>
  <body>
    <header>
      <h1>Full Width Background with Fixed Width Content</h1>
      <h2>Exploring CSS</h2>
    </header>
    <main>
      <div class="wrapper">
        <p>This section should have a background of different color.</p>
        <p>We want this background to stretch from the leftmost to the rightmost borders of the window, but the content laid out in a central column.</p>
      </div>
    </main>
  </body>
</html>

body {
  background-color: red;
}

header {
  width: 960px;
  margin: 0 auto;
}

main {
  background-color: yellow;
}

.wrapper {
  width: 960px;
  margin: 0 auto;
}

How this renders can be seen in https://codepen.io/anon/pen/PVqVYN.

This works, but forces us to introduce a non-semantic wrapper element to letter-box the content.

The evolution of CSS has allowed us to drop the use of non-semantic elements in HTML, specially with the introduction of flex and grid.

If would be interesting if we could instead do something like this:

<html>
  <head>
    <title>Full Width Background with Fixed Width Content</title>
    <link rel="stylesheet" type="text/css" href="index.css" media="screen" />
  </head>
  <body>
    <header class="letterboxed">
      <h1>Full Width Background with Fixed Width Content</h1>
      <h2>Exploring CSS</h2>
    </header>
    <main>
      <!-- No wrapper here --> 
        <p>This section should have a background of different color.</p>
        <p>We want this background to stretch from the leftmost to the rightmost borders of the window, but the content laid out in a central column.</p>
      <!-- /No wrapper here --> 
    </main>
  </body>
</html>

body {
  background-color: red;
}

main {
  background-color: yellow;
}

.letterboxed {
  inner-width: 960px;
  padding: 0 auto;
}

Here I'm suggesting the addition of a new sizing property, inner-width, which would allow explicit setting of the inner-size, and modification of the behavior of padding, but just as an example. This is more an open question than a proposed solution.

I believe this could be achieved with current CSS with calc without the wrapper:

body {
  background-color: red;
}

main {
  background-color: yellow;
}

main, header {
  box-sizing: content-box;
  padding: 0 calc((100% - 960px) / 2);
}

I haven't been able to find anything like this in css-sizing-4 or css-sizing-3.

Start by reviewing the HTML/CSS examples and the referenced css-sizing-3 and css-sizing-4 sections, then compare the proposed behavior with the existing calc() approach. Done would require a resolved CSS Working Group direction and, if accepted, a concrete specification change defining full-width backgrounds with constrained inner content.

Written by the indexing model from the issue text.

[css-backgrounds] Full Width Background with Fixed Width Content?

Description

Contributor guide

First steps

Research direction

Assessment