Home/ Questions/Q 6100555
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-23T13:24:01+00:00

At the moment I have this (standard) code which gives me a full-width background

  • 0

At the moment I have this (standard) code which gives me a full-width background but constrains the header to centered 960px:

<div style="background-color: #222">
    <header style="width: 960px; margin: 0 auto;">
        <h1>Site Title</h1>
    </header>
</div>

Is there a way I can apply those to a single element in CSS, and avoid the div altogether? I considered this jQuery hack to calculate and set left and right padding on header but a pure CSS solution would be better.

Desired HTML:

<header>
    <h1>Site Title</h1>
</header>

It might not be possible but thought I’d ask before dismissing it!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You can ditch the div wrapper in favor of :before and :after. Here’s an article on it: http://css-tricks.com/9443-full-browser-width-bars/

    The end of the article has a link to information on which browsers support :before and :after. For those that don’t, you could use a javascript polyfill.

    • 0