Full-width Bars

This page illustrates a common CSS problem where you need an element background to extend beyond its normal boundary.

This heading will extend to the left

Commonly, you'll experience the issue with components such as footers which have text constrained to a certain dimension but a background which stretches the full width of the browser window.

You may also need to implement headings or menu designs like the ones shown on this page.

This heading will extend to the right

Fortunately, you can implement full or partial-width bars in CSS alone without using additional elements.

For more information, please view the source of this page and refer to:
How to Extend Wrapped Elements to the Full Browser Width Using CSS