Header that stretches entire width

Hi,

I’m new to this forum… And I haven’t designed a site for years and now I’m going to give it a go again.

I would like to know how you guys get a header that extends the full width of a page at all resolutions.
As an example the blue bar/header on top of this site: http://www.nokia.com/global/about-nokia/investors/investors/ or even facebook has it.
Is this done by a css code with the div?

Thx in advance… And i’m very sorry if this is one of those stupid questions.

Welcome to Sitepoint Stukken.

To answer your question: first remeber that the header is actually an element beign centered. there is no set technique as CSS and HTML will interact to produce the visual (illusion ) of the effect desired. So let forget the sample site and start from scratch.

by default, all BLOCK level elements stretch to occupy the whole width of their CONTAINER
IF ALL YOU WANT is a BLUE rectangle across the page, any UNCONTAINED block element will do.


header{background:blue; color:#fff;display:block; }
<body>
 <header>I am a blue header that goes across the page</header>
</body>
 

that simple.

If the content is text and all you want to do is center it, add text-align:center;

However if you wanted to center other block level tags then you will need another element to act as a wrapper and you will need to give the inner element a defined WIDTH


.hed{background:blue; }
header{color:#fff;display:block; width:960px; margin:0 auto; }
<body>
  <div class="hed">
          <header>
                    ...html code here....
          </header>
  </div>
</body>
 

I hope that helps

Thanks very much!

.header {
	background-color: #000;
	height: 50px;

}
.container {
	margin: 0 auto;
	width: 960px;
}
 <div class="header">
            <div class="container">
                <!-- Content Goes Here -->
            </div>
        </div>

That should be what you’re looking to accomplish.

Thanks very much, I had to alter it to this to get it without a margin, if anyone wants to know in the future.


        margin: -8 -8 auto;
	top 0;
	left: 0;
	right: 0;