100% parent, definite-width child

You want to have a 100% expanding parent while still having control over the child to have a definite width?

What’s the use for this? A 100% background not interfering with the child that has width.

[code title=”HTML” lang=”html”]
<div class="container">
<div class="content">
Content
</div>
</div>
[/code]

[code title=”CSS” lang=”css”]
.container {
background-color:red;
}

.content {
margin:0 auto; /* To center the div */
max-width:960px; /* To make it responsive in viewports smaller than 960px */
}
[/code]

And you can even add box-sizing:border-box to the content!

[code title=”CSS” lang=”css”]
.content {
max-width:960px;
box-sizing:border-box; /* Don’t forget to add the vendor prefixes */
}
[/code]