Description
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.