CLEARFiX - xhtml, css, javascript, seo

Vůbec nevím jak je tento princip účinný nebo jak moc googlu doopravdy pomáhám, ale jsem naučený, že první co musí být v kodu je text samotné stránky, a poté např. hlavička, levý sloupce / pravý sloupec, patička (někdy tento způsob nepoužiji 100% kvůli hlavičce a problematickému sepisování).

Typický příklad rozložení stránky:

HTML kód by v normálním případě vypadal:

	hlavička



	levé menu


	text stránky - obsah



	patička

CSS kód:

#header{
width:960px;
height:150px;
}
#content{
width:960px;
padding:20px 0px;
}
#content #menu{
width:220px;
float:left;
}
#content #text{
width:720px;
float:right;
}
#footer{
width:960px;
height:100px;
}

Takto to napíše většina kodéru, kteří postupují blok po bloku, ale jak jsem řekl víše, mi chceme docílit toho, aby text byl na prvním místě, proto by náš kod měl vypadat:

	text stránky - obsah


	levé menu



	hlavička


	patička

Abychom docíly něčeho podobného, tak css kod budeme muste trochu poladit:

#header{
width:960px;
height:150px;
/* timto dostaneme hlavicku opet nahoru, ale cela stranka pote musi byt
obalena jeste jednim divem, ktery bude mit sirku 960px, a
nastaven position:relative */
position:absolute;
top:0px;
left:0px;
}
#content{
width:960px;
padding:170px 0px 20px 0px; /* zvysil se padding + 150px */
}
#content #menu{
width:220px;
float:left;
}
#content #text{
width:720px;
float:right;
}
#footer{
width:960px;
height:100px;
}

Nevím zda ještě musím nějak kod dál okecávat změny jsem okomentoval v CSS, takže to bude asi všem hned jasné co se udělalo, jediné co se musí ještě do HTML přidat je jeden DIV, který bude celou stránku obalovat, ale ten tam bude každý mít už předtím, takže jediné co se musí nastavit je position:relative, ke kterému se poté bude pozicovat absolutně #header.
I kdyby to stále nebylo někomu dost jasné, tak tuto techniku jsem nedávno použil na stránce www.pohony-menice.cz.
Komentáře jsou Vám otevřené, takže se nebojte napsat svoje zkušenosti, techniky, účinnost tohoto zápisu