CSS: barra líquida com texto não se expandem

Question

Eu tenho uma barra horizontal que recebeu um width do 100%. Dentro da barra horizontal, tenho um texto que é alinhado em um 978px recipiente. Sempre que a janela do navegador é encolhida para que seja menor que 978px Amplo, uma barra de rolagem ao longo da parte inferior da página é exibida. Sempre que eu rolo para a direita, a barra não abrange mais a largura da página, mas, em vez disso, é deixada para trás. Eu entendo por que isso acontece, mas não sei o que fazer para consertar. Se você tem alguma idéia, me avise. Obrigada!

Uma página de exemplo

Answer 1

Bem, você tem #Header definido para 100% do seu bloco contendo (que seria o corpo). Quando você encolher o corpo, a largura do cabeçalho diminui. Se a largura do corpo for menor que a largura do contêiner, a barra preta não se estenderá todo o caminho.

O que exatamente você prefere?

-Não ter uma barra de rolagem: retire o recipiente, centralize o texto usando #header

-A bar preta expande toda a distância: a maneira mais fácil de resolver que é dar ao contêiner uma cor de fundo.

Answer 2

Mudar:

width: 978px;

para:

max-width: 978px

Isso parecia fazer o truque no FF3, IE7 e Chrome.