Proč to takhle nejde?

Proč?
zkouším horizontální vycentrování stránek. našel sem si na netu:
http://sovavsiti.cz/samples/samp02031b.html

pokud to skopčím a otevřu u sebe když ale chci to převést na externí CSS tak mi to nejde. pozadí je bílé a je to zarovnaný nalevo. nebere auto u marginu. pokud tam dám třeba 50% (100px) tak to vezme. čím to?

takhle mám externí CSS (jen překopčeno):
<style type="text/css">
body{
margin: 0;
padding: 0;
font-family: georgia, Book Antiqua, palatino, serif;
color: #000;
background : #ffc none;
text-align: center;
}
#page{
width: 550px;
margin-top: 2em;
margin-bottom: 2em;
margin-left:auto;
margin-right:auto;
padding: 1em;
border: 2px solid #cc9;
color: #000;
background : #fff none;
text-align: left;
}
</style>

a volám si ho takto:
<head>
<title>Untitled</title>
<link rel="STYLESHEET" href="aaa.css" type="text/css">
</head>

umístění je správné (stejný adresář)
mozilla mi to vycentruje ale nepoužije barvu
IE6 nic :(
<HTML>mam pocit ze by v CSS souboru nemelo byt

<b>style type="text/css"</b>

Jinak, nebude ti centrovat div kdyz nezna jeho sirku. A div bez obsahu se taky nezobrazi, leda ze by mel napevno nastaveny rozmery (vysku)</HTML>
no ten div ve kterým je text #page má šířku 550px. a právě pokud to CSS použiju přímo (ne externě) tak vše funguje
pokud ho ale natáhnu ze souboru (uplne ten samej)
tak nefunguje :(

a ten CSS dělám pře 1stpage2000 a ten to tam píše. jinak zatím sem stím problém neměl
skaff má pravdu, vymaž si z externího css tagy <style type...> a </style>, skutečně tam nepatří, pak to funguje!
nj tak to je pro mě novinka to budu asi muset radši upravit u všech mích CSS.
jen by mě zajímalo proč sem doted problém neměl

no díky všem
ještě dotázek. na středu to už mám :)

ted bych ještě potřeboval:
mám obrázek uzavřenej do divu
a pod něj potřebuji další taky v divu. (důvodem je že ten druhý se bude měnit na jiných stránkách)
a problémem je že mezi nima je mezera vIE asi tak 3px. vím že sem někde viděl jak to obejít jen nevím kde :(
kdyžtak se koukněte na
http://kaer-morhen.webz.cz/aaa.html
u toho způsobu se asi nedá použít pozicování
Problém je v tom, že IE počítá do rozměru objektu i border.
Přidej do aaa.css do třídy "hlava2" tento řádek včetně toho podtržítka před margin, to umí přečíst jen IE:

_margin: -3px 0px -3px 0px;
tak sem přišel na postup s abolutním:

.hlavicka{position:absolute;
left:50%;
margin-left:-475;
height:140;
width:950;
padding:0;
}
.hlava2{position:absolute;
left:50%;
top:140;
margin-left:-475;
height:25;
width:950;
pading:0;
}
.levy{position:absolute;
left:50%;
top:165;
margin-left:-475;
height:auto;
width:130;
pading:0;


jeste to ale musím nějak vyladit a uvidíme :)
tak sem na vycentrování šel přes marginy. Ale:
problém je. mám horní logo-levé menu a "klasik" jak dostanu klasika vedle levýho menu? vždy mi to hodí pod menu :(

<div class="obal">
<div class="hlavicka"> baner
</div>
<div class="hlava2"> baner
</div>
<div class="levy"> menu
</div>
<div class="klasik"> text
</div>
</div>

no a výsledek vypadá takto:
http://kaer-morhen.webz.cz/aaa.html

co mám nastavit u klasiku za margin a bych to dostal tam kam potřebuji?

de to vůbec?
No, marginem by to šlo, ale asi to bude vůči html pěkná zhovadilost.

Nastav pro "klasik"

margin: -20px 0px 0px 130px;
_margin: -20px 0px 0px 115px;
height: 20px;

Těch 20px a -20px je výška a posun o tuto výšku klasiku, je nutné ji nastavit (může být i jiná), protože jinak by se výška měnila s velikostí použitého fontu, pevná velikost fontu to řeší jen pro IE, _margin je opět pro IE (5.5) nevím, jak je to v IE6, ale i tak je vždy nebezpečí, že se bude prvek s nastaveným margin posunovat v závislosti na obsahu ostatních prvků,
Tady by bylo asi nejlepší řešení použít pozicování.
Kdyz v tom externim stylu co mas omaznes prvni a posledni radek tak by ti to melo jit... myslim tim to <style.... > </style>
tak se "zatím" povedlo. jen ještě Jde udělat minimální výška v IE?
našel sem akorát zapis do css:

min-height: 350px;
_height: expression(document.body.clientHeight < 350? "350px" : "auto" );

ale nějak to nechápu a navíc mi to ani nefunguje.
a ejdiná metoda která mě napasla jsou <br> v textu.

jinak to vypadá takto.:

http://kaer-morhen.webz.cz/aaa.html
Pro IE nastav v "klasiku" jako POSLEDNÍ hodnotu:

_height: 350px;

IE to bere jako min-height
zkusím jen dotaz. co když obsah bude větší?
Zkusim jen odpoved. Podivej se na css atribut overflow.
http://www.w3.org/TR/CSS21/visufx.html#overflow
Tak se DIV roztáhne podle velikosti obsahu, funguje v IE 5.5 6.0, stačí vyzkoušet, ale to udělá i v FF a Opeře.
to prave plati pro overflow: auto (pokud je zadan rozmer objektu)