CSS Trik: Oprava chyby pozadí při 100% šířky stránky

Dnes jen velice krátce. Na spoustě webů používajících vodorovné čáry přes celou šířku okna prohlížeče bývá často viděn neošetřený problém, způsobující nehezký vzhled při scrolování. Jeden obrázek za tisíc slov:

Jak vidíte, pozadí stránky není zcela dotažené do konce, což možná zrovna u facebooku možná tolik nevadí, protože je pozadí bílé. Na jiném webu by to však mohlo způsobit například nečitelnost textu.

To je způsobeno tím, že má element s pozadím nastavenou šířku na 100%. Pokud tedy zmenšíme okno na velikost menší než je šířka našeho globálního wrapperu (který používáme třeba kvůli vystředění stránky), tak tento wraper přeteče přes šířku nadřazeného elementu (čili elementu s pozadím).

A jaké má tato situace řešení?

Velice jednoduché, stačí nastavit elementu nesoucímu toto pozadí minimální šířku.

V případě facebooku tedy:

#bluebar {
  /*původní definice*/
  min-width: 981px;
}

Doufám, že se Vám tento tip bude hodit.