Fixed Width; Fluid Backgrounds Using a Single Element

Sometimes you may need a layout that calls for fixed width content but a fluid background. You can accomplish this with multiple divs or, if you use the calc function, you can just use one div or element, as exemplified below.

[cc lang=”html”]

This content is 200 pixels wide and wraps after it reaches 200 pixels.

[/cc]

[cc lang=”css”]
div.section {
width: 200px;
padding: 0 calc(50% – 100px);
background-color: blue;
color: white;
}
[/cc]

See the demo at jsfiddle.