Natahování divu až úplně

Zajímavý titulek, ne? Mě se tedy líbí, ale nevím jestli ho každý pochopí. Jen napovím, že druhé slovo nemá co dočinění s divením se, nebo podivováním nad něčím, nýbrž se užívá ve webdesignu.

Tedy dělám teď jedny stránky. Nejsou to ale obyčejné stránky, potřebuji totiž, aby se levý sloupeček s modrým pozadím natahoval podle délky pravého sloupečku (i s pozadím). Po bohatých zkušenostech s tabulkovým layoutem jsem si myslel, že to nemůže být problém, ale trochu jsem se spletl. Tato operace vyžaduje speciální, až nelogické myšlení ve výsledku s jedním malým paradoxem.

Při studování několika návodů, jak provést něco podobného, či dokonce stejného, jsem podstatu pudla jaksi příliš nechápal. Přišlo mi vhod až nekolikeré přečtení náhodných článků tohoto tématu. No být tím, kdo to vymyslel, tak se stydím, je to nehezká layoutová prasárna, ale budiž, funguje to. Takže v kostce podstata toho, co se všude píše:

Dejme tomu, že máte dvousloupcový layout v obalovém divu. Že byste nejraději oboum sloupečkům nastavili float na left? Omyl. nastavíte jej pouze prvnímu sloupci. A co ten druhý? Tomu stačí nastavit levý margin o šířce levého sloupce (třeba dvěstě pixelů).

Protože chceme, aby levý sloupeček byl celý modrý (tedy až úplně, neboli úplně dolů, či podle délky pravého sloupce (vše znamená to samé)), musíme pro to něco udělat. Že byste nejraději použili background-color: blue;? Znovu špatně. A teď nastává další prasárna. Pozadí musí být obrázkové ať chceme, nebo ne. Navíc ho nenastavujeme levému sloupečku, ale obalovému divu (!), takže si musíme vytvořit proužek o šířce levého sloupce a výšce nejlépe 1px, poté nastavíme background: top left repeat-y; samozřejmě s URL obrázku. Že je to ale nehezký postup?

A nakonec ten slibovaný paradox. Zkusili jste v klasickém dvousloupcovém (dvakrát floatovaném) layoutu nastavit height: 100%; levému sloupečku společně s background-color: blue;? A zkoušeli jste to i v Internet Exploreru?