Toto je nejjednodušší příklad centrování celé stránky pomocí CSS. Vnitřní část stránky (kde se nachází tento text) se plynule rozšiřuje spolu s šířkou okna prohlížeče a současně se rozšiřují i oba svislé okraje. Je to způsobeno tím, že okraje mají stanovenou šířku 15% z šířky okna prohlížeče a na vnitřní část tedy vždy zbývá 70%.
Zdrojový kód je plně v souladu s normou XHTML 1.0 a CSS 2 a měl by fungovat ve všech prohlížečích s alespoň částečnou podporou CSS 1. Příklad byl testován v Opeře 5.12 a IE 5.0. V obou prhlížečích je funkční, nicméně v IE 5.0 chybí spodní okraj (analogický hornímu).
Poznatky z dalších prohlížečů uvítáme na adrese redakce@sovavsiti.cz.
Celý obsah této stránky je "zabalen" do prvku <div> s unikátním atributem id. Kód vypadá nějak takto:
<div id="page">
...
zde je obsah stránky
...
</div>
V definici CSS pak jsou definována pravidla pro <body> dokumentu a pro <div> s atributem id = page. Vypadá to takto:
body {
margin: 0;
padding: 0;
color: #000;
background : #ffc none;
}
#page {
margin: 20px 15%;
padding: 1em;
border: 2px solid #cc9;
color: #000;
background : #fff none;
}
Nevyhovuje vám plovoucí šířka vnitřního obsahu stránky? Zde je řešení s pevnou šířkou.