[csswg-drafts] [css-sizing] Full Width Background with Fixed Width Content? (#3552)

lautarodragan has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-sizing] Full Width Background with Fixed Width Content? ==
Is it possible with pure CSS to achieve the following?

```html
<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>
```

```css
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
<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>
```

```css
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](https://www.w3.org/TR/css-sizing-3/#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:

```css
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](https://drafts.csswg.org/css-sizing-4/#replaced-intrinsic) or [css-sizing-3](https://drafts.csswg.org/css-sizing-3/#auto-box-sizes).

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/3552 using your GitHub account

Received on Thursday, 24 January 2019 10:19:44 UTC