CSS -> Oldalszerkezetek III.

III. Két oldalmenüs oldalszerkezet, rugalmas footer elhelyezéssel

Az előző leckében bal oldalra készítettünk egy menüt, ezt továbbfejlesztve jobb oldalra is csinálunk egyett.
A footer rugalmas elhelyezkedése most is egy fő szempont lesz. Alkalmazkodnia kell az oldal tartalmához.
És nemcsak a "content", hanem a többi ("left_side", "right_side") dobozhoz is.
Nézzük meg az elkészült oldalt
Explorer esetében.

1. Eddig a menü elhelyezéséhez a float tulajdonságot használtuk. Most sem lesz másképp.
Ám a HTML kód kicsit (elsőnek észszerűtlenül) átalakul. Nézzük:

Azt várnánk, hogy "right_side" DIV-ünk megszokottan valahová, a "content" alá kerül, a másik oszlop mellé,
de nem. Mivel az egész szerkezet a float tulajdonságra épül, így, ha a mostani oldalmenünk a "content" alá kerülne, gondban lennénk a másik oldalsó DIV-el.
Eddig a "content"-re alkalmaztuk a float: right; beállítást.
Tehát ezzel "content" doboz jobbra igazodik, és a bal oszlopnak is lesz elég hely mellette.
Ez nem is fog változni. Megvan mindhárom fő egység("content", "left_side", "footer") - kivéve most a "header"-t - tökéletesen elredezve.

2. Már csak a jobb oszlopnak kellene helyet szorítani. De hogyan?

A jól bevált módszerrel, a float-al. Nem hiába rendeztük így a HTML kódót. Ha most a "right_side" azonosítójú DIV-nek float: right; tulajdonságot adunk, akkor az az előzőekben már látott módon jobbra igazodik, így lesz helye a "content"-nek mellé csúsznia.
De a "content"-nek is megvan ez a beállítása, így ő is jobbra fog igazodni, tehát megintcsak lesz hely (feltéve, ha a szélességük összesen nem több, mint a container szélessége, mert akkor nem fog felcsúszni az a DIV, amelyiknek nincs helye) a bal oszlopnak is.

Minden a helyére került, és a "footer" is rugalmas maradt, mivel a clear: both; tulajdonsággal a lebegő elemek(amire a float beállítás kihat) alá kerül.

3. Kicsit szépítgessük oldalunkat.
Az előző leckében a "left_side" doboznak border-right tulajdonságot adtunk. A keret viszont csak az adott doboz magasságáig fog "leérni".
Elég csúnyán nézne ki, ha a most beépített DIV-el nem lenne egyenlő (a tartalmuk miatt) a keretük. Itt két megoldás jöhetne szóba:
a) Mindkét DIV-nek adunk min-height tulajdonságot, így, ha egyikben kevesebb a szöveg, akkor is a beállítás alapján megmarad a magassága.
De ez nem elég, hiszen a tartalmi rész ("content") még mindig elronthatja az összképet, ha túllépi a két oldalsó oszlop magasságát, így "kiekrülve" a kereteket is.
Tehát ezt a megoldást el is vethetjük.
b) A border tulajdonságot, ne a két oszlopra alkalmazzuk, hanem próbájuk ki csak a "content"-re.

Mindkét oldalára (bal, jobb) tettünk 2 pixel vastagságú keretet. A hatása olyan, mintha az oldlasó DIV-eknek lenne ez a tulajdonságuk.
Eddig gondunk volt a "content" rész magasságával, mert, ha túl sok benne a tartalom, túlhalad az oldalsó oszlopok keretén.
Most az a veszély áll fent, hogy a "content" keretét haladják majd túl a "left_side", illetve "right_side" DIV-ek.
Ezért számítsuk ki, körülbelül mekkora lehet (maximum) a két doboz magassága, és adjunk a "content"-nek min-height (IE 7> nem működik, csak egy kis JavaScript kóddal, amit már ismertettem) tulajdonságot.
Így, ha kevés tartalma, a keret akkor is el fogja érni az oldalsó DIV-ek magasságát.