3 sloupcový layout s pevnou šířkou sloupců

Zdravím všechny,

potřebuji udělat 3 sloupcový CSS/XHTML layout, všechny 3 sloupce budou mít pevnou šířku. To by nebyl problém, potřebuji ale obsah středního sloupce umístit v XHTML kódu na začátek stránky.

Nastylované chci, aby to vypadalo takto:

[=================HLAVICKA==================]
[=LEVYSLOUPEC=][=STREDNISLOUPEC=][=PRAVYSLOUPEC=]
[=================PATICKA===================]

Ale v XHTML kódu takto:

[=STREDNISLOUPEC=][=PRAVYSLOUPEC=][=LEVYSLOUPEC=]
[=================HLAVICKA==================]
[=================PATICKA===================]

Stačí mi nástin, kterým směrem se ubírat.

Díky předem. R.

Diky za odpoved,

moc tomu nerozumim. Ktery div napozicovat absolutne a kterymu divu dat position:relative a co vycentrovat? Zitra to budu resit, tak kdybys to jeste trochu osvetlil, tak bych to zitra vyresil. Diky.

Jinak jsem jeste nenapsal, ze cely ten layout ma byt zarovnany na stred.

R.

Díky všem za odpovědi. Tak jsem to udělal takto, zatím pracovni/testovací verze. Zatím jsem netestoval, jestli je to validní.

body {margin: 0; padding: 0; }
.box {width: 950px; margin: 0 auto; }
.right-and-middle {float: right; width: 700px; }
.left, .middle, .right {float: left; }
.middle {width: 450px; background-color: red; }
.right {width: 250px; color: #fff; background-color: green; }
.left {width: 250px; background-color: yellow; }
.content {margin-top: 110px; }
.header {height: 100px; width: 950px; background-color: brown; position: absolute; top: 10px; }
.footer {background-color: silver; }
.cleaner {font-size: 0px; line-height: 0px; height: 0px; clear: both; }

<div class="box">
<div class="content">
<div class="right-and-middle">
<div class="middle">
MIDDLE
</div>
<div class="right">
RIGHT
</div>
</div>
<div class="left">
LEFT
</div>
<div class="cleaner">&nbsp;</div>
</div>
<div class="headr">
HEADER
</div>
<div class="footer">
FOOTER
</div>
</div>

A jo, vidím, ale funguje to i bez něj :)

Pánové vřelé díky, šlape to dobře :)

Napadla mě ještě jedna zapeklitá věc, potřebuji, aby na některých stránkcáh nebyl pravý sloupec a střední sloupec se natáhl do uvolněného prostoru. Jde to udělat nějak jednoduše abych nemusel dělat samostatné CSS konstrukce pro stránky kde ten pravý sloupec nebude?

Našel jsem zatím řešení pro IE, kde pomocí expression, pokud neexistuje pravý sloupec, nastavím šířku middle na 100% jinak 450px; Pokud je vyplý JS nebo non IE browser tak má šířku 450px. Toto ale není ideální.

.middle {
background-color: red;
width: 450px;
width: expression(document.getElementById('right') == null ? "100%" : "450px");
}

Druhá možnost je přes JS na onload(); události nastavit šířku divu middle čemuž bych se ale chtěl vyhnout.

Ideální by bylo udělat to čistě v CSS ale to netuším, jak v non IE browserech zjistit, jestli pravý sloupec existuje nebo neexistuje.

Má někdo nějaký nápad?

a do css vůbec nemusíš šahat. Jinými slovy, middle a right vypustíš a obsah druhéhé (pravého) sloupce dáš do right-and-middle.

Jo, to mi přijde jako dobrý řešení. Zkusím to.