Tällä sivulla esitellään kymmenen CSS-muotoilua, joita div-ulkoasun rakentamisessa tarvitaan eniten. Kannattaa kuitenkin muistaa, että saman ulkoasun voi toteuttaa usealla eri tavalla, ja että tällä sivulla esitellyt muotoilut sulkevat vain harvoin toisensa pois. Div-ulkoasussa on itse divien lisäksi myös paljon muita muotoiltavia elementtejä, esimerkiksi otsikoita, linkkejä ja kuvia. Sivun sisältö ja muut elementit vaikuttavatkin oleellisesti siihen, mitä muotoiluja div-taitossa kannattaa käyttää.
Takaisin "Oppaat ja esimerkit" -osion etusivulle
Width ja height määrittävät diville leveyden. Oletuksena div-elementin leveys on 100 % ja korkeus joustava. Korkeuden ja leveyden avulla on mahdollista hallita div-ulkoasun eri osien kokoja, esimerkiksi navigaation, otsikon tai tekstialueen kokoa.
Maksimi- ja minimikorkeuksien ja -leveyksien avulla divin voi määrittää maksimissaan tai minimissään tietyn kokoiseksi. Minimimuotoiluista on erityisen paljon hyötyä silloin, kun ulkoasu uhkaa hajota, mikäli sisältöä on liian vähän. Maksimimuotoilu puolestaan on erityisen hyvä silloin, kun ulkoasun tai sen osan leveys määritetään esimerkiksi prosenteissa, mutta sen koon ei haluta kasvavan äärettömän suureksi.
Positionin avulla divien paikan voi määrittää sivulla hyvinkin tarkasti.
Absolute-arvoa käytettäessä divin paikka määrittyy näkyvän sivun reunoista. Mikäli div on kuitenkin lohkotason elementin sisällä ja sen paikan määräävät left-, right-, top- ja bottom-muotoilut jätetään pois, absolute-arvon avulla divin voi siirtää emoelementin vasempaan ylänurkkaan. Absolute on erityisen hyvä silloin, kun elementtien paikka on määritettävä hyvin tarkasti.
Relative-arvon avulla elementin voi siirtää pois sen oletuspaikalta. Relative onkin omimmillaan silloin, kun esimerkiksi yksittäisiä sanoja tai osia halutaan siirtää pieniä matkoja. Joskus selaimet jättävät div-elementtien väliin väkisin tyhjää tilaa, jonka paikkaamiseen relative sopii erinomaisesti. Aukkojen kanssa kannattaa kuitenkin olla varovainen, sillä eri selaimet tulkkaavat sivuja eri tavoilla.
Fixed saa elementin liimautumaan kiinni kuvaruutuun. Fixed soveltuu parhaiten esimerkiksi navigaation pitämiseen koko sivun selaamisen ajan näkyvillä. Internet Explorer ei tue fixediä, vaan tulkkaa sen absoluten tavoin.
Z-index liittyy läheisesti position-muotoiluun. Sen avulla position-muotoilun alaiset elementit voidaan järjestää siten, että suurimman numeroarvon saanut elementti näkyy päällimmäisenä. Näin elementtien alkuperäistä päällekkäisyysjärjestystä voidaan muuttaa.
Z-indexin suurimmat hyödyt tulevat esiin silloin, kun esimerkiksi teksti meinaa jäädä jonkin kuvan alle piiloon. Elementtien keskinäistä järjestystä muuttamalla kuva voidaan määrittää sijoittumaan tekstin alle.
Kellumismuotoilun avulla esimerkiksi navigaatiovalikko voidaan määrittää kellumaan keskelle leipätekstiä. Tämä helpottaa monien ulkoasujen rakentamista erityisesti silloin, kun positionin avulla sijoittaminen tuntuu tönköltä tai epätoimivalta. Floatiin liittyy kuitenkin joitakin ongelmia, kuten tekstin ylivuotoa ja marginaalieroja eri selainten välillä. Huolellisella tarkistamisella ja muotoilujen käytöllä nämä ovat vältettävissä.
Clear-muotoilu on helppo ratkaisu kellumismuotoilun aiheuttamiin ylivuoto-ongelmiin. Clearin avulla voidaan määrittää, ettei elementin rinnalla saa olla mitään kelluvia elementtejä. Näin esimerkiksi kelluvan menun vuotaminen muun ulkoasun päälle tai sen yli voidaan estää.
Display-muotoilun avulla div-elementin saa taipumaan moneen muotoon. Divin voi määrittää esimerkiksi listaksi tai tekstitason elementiksi. Divin voi myös määrittää katoavaksi, jolloin sitä ei näytetä lainkaan. Display on hyödyllinen esimerkiksi menu-linkkien muotoilussa ja ylimääräisten otsikoiden piilottamisessa. Sen avulla divin voi halutessaan saada käyttäytymään myös span-elementin tavoin, mikä voi toisinaan olla erityisen hyödyllistä.
Visibilityn avulla elementin voi piilottaa siten, että elementin käyttämä tila jää varatuksi. Jos divin siis piilottaa visibility-muotoilun avulla, diviä ei näytetä, mutta sen käyttämä tila näkyy tyhjänä, varattuna tilana.
Välistykset eli margin- ja padding-muotoilut ovat div-ulkoasua rakennettaessa erityisen tärkeitä divien välisten etäisyyksien määrittelyssä. Monesti margin- ja padding-muotoiluilla divien väliset suhteet ja sijainnit saa määritettyä helpommin ja joustavammin kuin esimerkiksi position-muotoilulla. Marginin avulla on myös helppo keskittää elementtejä määrittämällä keskitettävän elementin vasemmalle ja oikealle puolelle marginiksi auto.
Overflow’n avulla voidaan määrittää elementille vierityspalkki. Yleensä overflow’ta ei tarvita divien yhteydessä, mutta mikäli diveistä halutaan rakentaa selkeä, vierityspalkillinen tekstilaatikko iframen tai perinteisen lomakkeen tekstikentän tapaan, overflow on tarpeellinen. Overflow onkin omimmillaan vierityspalkkien sijoittamisessa erilaisiin laatikoihin.