Stretching a centered page

[alxmaverick]

I recently started using CSS and I want to create a page that looks like this -

http://www.carbonnine.com/

Where the top bar, the black area, and the link bar are stretched across the whole page. However the content of these sections are also left aligned in a centered 1000px wide box.

http://inkpad6.tripod.com/index2.html

The above is what I currently have. Everything is in place in a 1000px box but the top three bars do not span the page. How would I stretch my top three boxes so they space the whole page without being completely left-aligned to the browser like in the example above? Any CSS is appreciated.

Thank you for your help!

[Nile]

Everything goes across the page fine for me, what browser are you wearing? And also if you can send me a screen shot, that'd be great!
BTW: Nice menu!

[Medyman]

You need to size all the "bars" at 100% of browser width. So, wherever you have 1000px, change that to 100%.

Then, you'll need to encapsulate your content , size it to 1000px and center it within the larger container.

For example:

<div id="header">
   <div class="inner">
      Header Content Here
   </div>
</div>

div#header {
   width:100%
}
div.inner {
   margin:0 auto;
   width:1000px;
}

[Medyman]

Everything goes across the page fine for me, what browser are you wearing? And also if you can send me a screen shot, that'd be great!
BTW: Nice menu!

Is your resolution higher than 1024px wide?

[Nile]

I'll check in a sec, btw:
100% doesn't work in IE.

Edit:
It is 2024px wide.

[Medyman]

100% doesn't work in IE.

What? In what context? Do you have an example of it not working?

[alxmaverick]

Haha the issue isn't centering and encapsulating. That I have down fine. The problem is that I would like the stripes at the top to extend to the left and the right of the area while everything else (the 1000px wide body) stays in the center. I would also like the silver navigation bar as well as the black area to extend to the edges of the page too.

I uploaded it to a different website so you don't get all the stupid Tripod ads.

www.buddycomic.com/se/index2.html

If you notice on this website - http://www.carbonnine.com/ the top dark gray bars extend to the left and the right of the carbon nine title image even though the content is centered. My page currently looks partitioned.

Thanks again guys!

[Nile]

What? In what context? Do you have an example of it not working?

I've heard it before, and I've tested it before, but now it works.

[Medyman]

Haha the issue isn't centering and encapsulating. That I have down fine. The problem is that I would like the stripes at the top to extend to the left and the right of the area while everything else (the 1000px wide body) stays in the center. I would also like the silver navigation bar as well as the black area to extend to the edges of the page too.

Actually, it is all about encapsulating and centering. Let me try to explain a different way.

First, change your container's width to 100%;

#container
{
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  text-align: left;
}

Next, change your header's width to 100%;

#header {
  background: #222222;
  background-image: url('bg_carbonfiber.png');
  float: left;
  width: 100%;
  height: 100px;
}

Next, add the following CSS style

div.inner {
   width:1000px;
   margin:0 auto;
}

Finally, change your markup to this:

<div id="header"><div class="inner"><img src="title.jpg"></div></div>

Now, your header should stretch the entire width of the page, while the content floats within a 1000px range in the center. Follow the same technique with the rest of your styles!