Miten saa 3 diviä vierekkäin, siten että vasemmanpuoleinen on esim. 68px, keskimmäinen on 200px ja oikeanpuoleinen oikeaan reunaan asti?
Meitsi ei tajua. Ensimmäiset kaksi menee kyllä oikein mutta kolmas menee ihan minne sattuu.
Muiden osien muodoilla ei ilmeisesti ole merkitystä? (kuitenkin; yläosa on koko sivun mittainen ja sisältöosassa on 2 diviä vierekkäin)
<html>
<head>
<title>Kolmen palstan testi</title>
<style type="text/css">
* { border : 0; padding : 0; margin : 0; }
#dokumentti {
padding-left : 268px;
}
#ohut {
background : blue;
left : 0;
position : absolute;
width : 68px;
}
#paksu {
background : red;
left : 68px;
position : absolute;
width : 200px;
}
#sisalto {
background : green;
}
</style>
</head>
<body>
<div id="dokumentti">
<div id="ohut">1</div>
<div id="paksu">2</div>
<div id="sisalto">3</div>
</div>
</body>
</html>Etköhän tuolla pääse alkuun :)
Koodi toimii identtisesti niin IE:llä, Operalla kuin Firefoxilla.
Onko tätä koodia mahdollista jotenkin keskittää sivulle. Nythän nuo 3 palstaa vievät 100% ruudun leveydestä, entä jos haluaisinkin että vievät vain 90% koko ruudun leveydestä.
Pikseliarvojen keskittäminen onnistuu helpommin kuin prosentuaalisten arvojen. Käytännössä lisäykset siten, että #dokumentin leveydeksi asetetaan haluttu leveys miinus #documentin vasen padding, ja sitten laitetaan margin : 0 auto; plus DOCTYPEksi jokin Strict (XHTML 1.0 tai HTML 4.01), jotta IE tajuaa tuon keskityksen.
Jos haluaa käyttää prosentuaalisia arvoja, niin kannattaa laskimella laskea miten saa toimivimman leveyden. 90% on liian korkea arvo, sivusta tulee liian leveä kun padding lasketaan mukaan leveyteen. Toisaalta Transitional DOCTYPE korjaa tuon ongelman, koska padding ei siinä lisää leveyttä.
Aihe on jo aika vanha, joten et voi enää vastata siihen.