CSS: Liquid Bar with Text Won't Expand

Question

I have a horizontal bar that has been given a width of 100%. Within the horizontal bar, I have text that is left-aligned within a 978px container. Whenever the browser window is shrunk so that it is less than 978px wide, a scrollbar along the bottom of the page appears. Whenever I scroll to the right, the bar no longer spans the width of the page but instead, is left behind. I understand why this happens, but I don't know what to do to fix it. If you have any ideas, let me know. Thank you!

An example page

Answer 1

well, you have #header set to 100% of it's containing block (which would be the body). When you shrink the body, the header's width shrinks. If the body's width is less than the container's width, the black bar will not extend the whole way.

What exactly would you rather it did?

-not have a scroll bar: take out the container, center the text using #header

-the black bar expands the whole distance: The easiest way to solve that is to give the container a background-color.

Answer 2

Change:

width: 978px;

to:

max-width: 978px

That seemed to do the trick in FF3, IE7 and chrome.