Tällä kertaa tällainen ongelma:
Minulla on yksi iso div, jonka sisällä on kolme diviä, joista yksi on vasemmalla ja kaksi oikealla. Oikealla olevien divien tulisi asettua siten, että ylempi olisi kiinni vasemmanpuoleisen divin yläreunassa, ja toinen taas sen alla ihan vasemmanpuoleisen divin alareunassa kiinni. Tämä kuva voi auttaa tajuamaan: http://i56.tinypic.com/24mt89f.png
Kaikkien elementtien leveydet ovat tiedossa, mutta jokaisen korkeus voi olla mitä vain.
Saako tätä tehtyä CSS:llä, vai täytyykö turvautua taulukkotaittoon? Jos korkeudet olisivat kiinteät, tämä olisi helpompi, mutta nyt en tajua :/
Mikä juju tämän "empty spacen" kanssa on? Onko sen tarkoitus olla kiinteäkokoinen erotin? Joustavasti kokoa muuttavana tyhjänä tilana se ei ole järkevä, tai ainakin mielestäni siitä tulee aika helposti huonolta näyttävä lopputulos. Kiinteällä koolla noiden kanssa voikin jo alkaa vekslata jotakin.
Siksitoisekseen mihinkään taulukkotaittoon ei ole tarvetta palata, sillä CSS:stä löytyy vähintäänkin display: table; sekä sen johdannaiset – taulukolla siis ei tarvitse taittaa, vaikka voitkin sen ominaisuuksia käyttää hyväksi. Tosin IE7 ja vanhemmat eivät sitä tue, mutta ulkoasun saanee silti näyttämään niilläkin ookoolta, vaikkei lopputuloksesta tulisikaan samannäköinen muiden selainten kanssa.
Lisää tietoa kiinteistä mitoista. Tein jotain tuonnepäin vähän arvaillen ja varmaan voit muokata sitten mieluiseksi. Korkeus tulee suoraan sisällön mukaan.
<html>
<head>
<style type="text/css">
#d1
{
display: table;
position: relative;
}
.row
{
display: table-row;
}
.cell
{
display: table-cell;
}
#d2
{
background-color: #FF0000;
width: 200px;
}
#d3
{
background-color: #00FF00;
}
#d4
{
background-color: #0000FF;
position: absolute;
bottom: 0;
}
</style>
</head>
<body>
<div id="d1">
<div class="row">
<div class="cell">
<div id="d2">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed posuere interdum sem. Quisque ligula eros ullamcorper quis, lacinia quis facilisis sed sapien. Mauris varius diam vitae arcu. Sed arcu lectus auctor vitae, consectetuer et venenatis eget velit. Sed augue orci, lacinia eu tincidunt et eleifend nec lacus. Donec ultricies nisl ut felis, suspendisse potenti. Lorem ipsum ligula ut hendrerit mollis, ipsum erat vehicula risus, eu suscipit sem libero nec erat. Aliquam erat volutpat. Sed congue augue vitae neque. Nulla consectetuer porttitor pede. Fusce purus morbi tortor magna condimentum vel, placerat id blandit sit amet tortor.
</div>
</div>
<div class="cell">
<div id="d3">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed posuere interdum sem. Quisque ligula eros ullamcorper quis, lacinia quis facilisis sed sapien. Mauris varius diam vitae arcu. Sed arcu lectus auctor vitae, consectetuer et venenatis eget velit. Sed augue orci, lacinia eu tincidunt et eleifend nec lacus. Donec ultricies nisl ut felis, suspendisse potenti. Lorem ipsum ligula ut hendrerit mollis, ipsum erat vehicula risus, eu suscipit sem libero nec erat. Aliquam erat volutpat. Sed congue augue vitae neque. Nulla consectetuer porttitor pede. Fusce purus morbi tortor magna condimentum vel, placerat id blandit sit amet tortor.
</div>
<div id="d4">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed posuere interdum sem. Quisque ligula eros ullamcorper quis, lacinia quis facilisis sed sapien. Mauris varius diam vitae arcu. Sed arcu lectus auctor vitae, consectetuer et venenatis eget velit. Sed augue orci, lacinia eu tincidunt et eleifend nec lacus. Donec ultricies nisl ut felis, suspendisse potenti. Lorem ipsum ligula ut hendrerit mollis, ipsum erat vehicula risus, eu suscipit sem libero nec erat. Aliquam erat volutpat. Sed congue augue vitae neque. Nulla consectetuer porttitor pede. Fusce purus morbi tortor magna condimentum vel, placerat id blandit sit amet tortor.
</div>
</div>
</div>
</div>
</body>
</html>Merri kirjoitti:
Mikä juju tämän "empty spacen" kanssa on? Onko sen tarkoitus olla kiinteäkokoinen erotin? Joustavasti kokoa muuttavana tyhjänä tilana se ei ole järkevä, tai ainakin mielestäni siitä tulee aika helposti huonolta näyttävä lopputulos. Kiinteällä koolla noiden kanssa voikin jo alkaa vekslata jotakin.
Empty space siis tarkoitti juurikin vain sitä tyhjä tilaa, joka jäi näiden kahden divin väliin (ja siis sen koko vaihtelee divien kokojen mukaan). Olisiko tähän sitten parempaa ratkaisua? Pete2:n koodi tuotti sen tuloksen, johon olen itsekin päätynyt: http://i51.tinypic.com/23h9icx.png (eli siis tuon sinisen pitäisi siirtyä tuon pinkin kohdalle).
Taulukkotaittona tämän voisi siis ajatella siten, että vasen div olisi <td rowspan="2"> ja alemmalla oikealla olisi vertical-align: bottom;. Pystyykö tätä kääntämään mitenkään display: table;-tekniikkaan?
villev kirjoitti:
Pete2:n koodi tuotti sen tuloksen, johon olen itsekin päätynyt
Jännittävää: minulla Pete2:n koodi tuosta suoraan kopioituna tuottaa juuri oikean tuloksen. Jos teit siihen muutoksia, laita mielellään linkki sivullesi, niin pääsemme kaikki tutkimaan sitä.
Outoa. En tehnyt koodiin yhtään muutosta, ja se näyttää juurikin tuolta kuin tuossa pistämässäni kuvassa (lukuunottamatta vaaleanpunaista laatikkoa ja nuolta).
Firefox nirsoilee table-elementin relativesta. Chromessa, IE9 betassa ja Operassa toimii. Tosin näissä kaikissa vain doctypen kanssa, ilman sitä esim. IE9 ei ymmärrä kaikkea CSS:ää.
Päivitys!
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#s {
display: inline-block;
position: relative;
}
#d1
{
display: table;
}
.row
{
display: table-row;
}
.cell
{
display: table-cell;
}
#d2
{
background-color: #FF0000;
width: 200px;
}
#d3
{
background-color: #00FF00;
}
#d4
{
background-color: #0000FF;
position: absolute;
bottom: 0;
}
</style>
</head>
<body>
<div id="s"><div id="d1">
<div class="row">
<div class="cell">
<div id="d2">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed posuere interdum sem. Quisque ligula eros ullamcorper quis, lacinia quis facilisis sed sapien. Mauris varius diam vitae arcu. Sed arcu lectus auctor vitae, consectetuer et venenatis eget velit. Sed augue orci, lacinia eu tincidunt et eleifend nec lacus. Donec ultricies nisl ut felis, suspendisse potenti. Lorem ipsum ligula ut hendrerit mollis, ipsum erat vehicula risus, eu suscipit sem libero nec erat. Aliquam erat volutpat. Sed congue augue vitae neque. Nulla consectetuer porttitor pede. Fusce purus morbi tortor magna condimentum vel, placerat id blandit sit amet tortor.
</div>
</div>
<div class="cell">
<div id="d3">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed posuere interdum sem. Quisque ligula eros ullamcorper quis, lacinia quis facilisis sed sapien. Mauris varius diam vitae arcu. Sed arcu lectus auctor vitae, consectetuer et venenatis eget velit. Sed augue orci, lacinia eu tincidunt et eleifend nec lacus. Donec ultricies nisl ut felis, suspendisse potenti. Lorem ipsum ligula ut hendrerit mollis, ipsum erat vehicula risus, eu suscipit sem libero nec erat. Aliquam erat volutpat. Sed congue augue vitae neque. Nulla consectetuer porttitor pede. Fusce purus morbi tortor magna condimentum vel, placerat id blandit sit amet tortor.
</div>
<div id="d4">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed posuere interdum sem. Quisque ligula eros ullamcorper quis, lacinia quis facilisis sed sapien. Mauris varius diam vitae arcu. Sed arcu lectus auctor vitae, consectetuer et venenatis eget velit. Sed augue orci, lacinia eu tincidunt et eleifend nec lacus. Donec ultricies nisl ut felis, suspendisse potenti. Lorem ipsum ligula ut hendrerit mollis, ipsum erat vehicula risus, eu suscipit sem libero nec erat. Aliquam erat volutpat. Sed congue augue vitae neque. Nulla consectetuer porttitor pede. Fusce purus morbi tortor magna condimentum vel, placerat id blandit sit amet tortor.
</div>
</div>
</div>
</div></div>
<p>Hello</p>
</body>
</html>Tällä keinoin toimii Firefox, Opera, Chrome & IE9 beta.
Muoks taas!
Sama juttu, mutta siistimpi HTML-syntaksi. Toimii yllämainituilla identtisesti.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#d1 {
position: relative;
width: 100%;
}
#d1:after {
clear: both;
content: '';
display: block;
}
#d2 {
background: #F00;
float: left;
min-height: 100%;
position: relative;
width: 200px;
z-index: 1;
}
#d3,#d4 {
margin: 0 0 0 200px;
}
#d3 {
background: #0F0;
}
#d4 {
background: #00F;
bottom: 0;
position: absolute;
z-index: 0;
}
</style>
</head>
<body>
<div id="d1">
<div id="d2">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed posuere interdum sem. Quisque ligula eros ullamcorper quis, lacinia quis facilisis sed sapien. Mauris varius diam vitae arcu. Sed arcu lectus auctor vitae, consectetuer et venenatis eget velit. Sed augue orci, lacinia eu tincidunt et eleifend nec lacus. Donec ultricies nisl ut felis, suspendisse potenti. Lorem ipsum ligula ut hendrerit mollis, ipsum erat vehicula risus, eu suscipit sem libero nec erat. Aliquam erat volutpat. Sed congue augue vitae neque. Nulla consectetuer porttitor pede. Fusce purus morbi tortor magna condimentum vel, placerat id blandit sit amet tortor.
</div>
<div id="d3">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed posuere interdum sem. Quisque ligula eros ullamcorper quis, lacinia quis facilisis sed sapien. Mauris varius diam vitae arcu. Sed arcu lectus auctor vitae, consectetuer et venenatis eget velit. Sed augue orci, lacinia eu tincidunt et eleifend nec lacus. Donec ultricies nisl ut felis, suspendisse potenti. Lorem ipsum ligula ut hendrerit mollis, ipsum erat vehicula risus, eu suscipit sem libero nec erat. Aliquam erat volutpat. Sed congue augue vitae neque. Nulla consectetuer porttitor pede. Fusce purus morbi tortor magna condimentum vel, placerat id blandit sit amet tortor.
</div>
<div id="d4">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed posuere interdum sem. Quisque ligula eros ullamcorper quis, lacinia quis facilisis sed sapien. Mauris varius diam vitae arcu. Sed arcu lectus auctor vitae, consectetuer et venenatis eget velit. Sed augue orci, lacinia eu tincidunt et eleifend nec lacus. Donec ultricies nisl ut felis, suspendisse potenti. Lorem ipsum ligula ut hendrerit mollis, ipsum erat vehicula risus, eu suscipit sem libero nec erat. Aliquam erat volutpat. Sed congue augue vitae neque. Nulla consectetuer porttitor pede. Fusce purus morbi tortor magna condimentum vel, placerat id blandit sit amet tortor.
</div>
</div>
<p>Hello</p>
</body>
</html>Plus toimii myös IE8.
Nyt tosiaan toimii! Vika oli tuossa FF:ssä. Suuret kiitokset kaikille auttaneille :)
Laitan tähän vaan tämän viestin sen vuoksi, että päivittelin tuota viestiäni lisäten siihen toisenlaisen toteutuksen. Se ei käytä table-muotoiluja ja saa siistimmällä HTML-syntaksilla aikaan saman lopputuloksen.
Ei tämä nyt täysin toiminutkaan, kun tarkemmin katsoin. Jos ensimmäisen (punaisen) divin sisältö on todella lyhyt (tai vaikka vihreän todella pitkä), menee vihreästä divistä osa piiloon (tai jopa koko div). Ongelma taitaa olla tuossa, kun tuo sininen div on position: absolute;.
CSS ei tue rowspania eikä colspania, joten ainoaksi yleispäteväksi ratkaisuksi jää taulukko:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
p {
margin: 0;
padding: 1em;
}
</style>
</head>
<body>
<table cellspacing="0" cellpadding="0" style="border:0;border-collapse:collapse;width:100%">
<tr>
<td style="background:#F00;vertical-align:top;width:200px" rowspan="2">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed posuere interdum sem. Quisque ligula eros ullamcorper quis, lacinia quis facilisis sed sapien. Mauris varius diam vitae arcu. Sed arcu lectus auctor vitae, consectetuer et venenatis eget velit. Sed augue orci, lacinia eu tincidunt et eleifend nec lacus. Donec ultricies nisl ut felis, suspendisse potenti. Lorem ipsum ligula ut hendrerit mollis, ipsum erat vehicula risus, eu suscipit sem libero nec erat. Aliquam erat volutpat. Sed congue augue vitae neque. Nulla consectetuer porttitor pede. Fusce purus morbi tortor magna condimentum vel, placerat id blandit sit amet tortor.</p>
</td>
<td style="vertical-align:top">
<div style="background:#0F0">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed posuere interdum sem. Quisque ligula eros ullamcorper quis, lacinia quis facilisis sed sapien. Mauris varius diam vitae arcu. Sed arcu lectus auctor vitae, consectetuer et venenatis eget velit. Sed augue orci, lacinia eu tincidunt et eleifend nec lacus. Donec ultricies nisl ut felis, suspendisse potenti. Lorem ipsum ligula ut hendrerit mollis, ipsum erat vehicula risus, eu suscipit sem libero nec erat. Aliquam erat volutpat. Sed congue augue vitae neque. Nulla consectetuer porttitor pede. Fusce purus morbi tortor magna condimentum vel, placerat id blandit sit amet tortor.</p>
</div>
</td>
</tr>
<tr>
<td style="vertical-align:bottom">
<div style="background:#00F">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed posuere interdum sem. Quisque ligula eros ullamcorper quis, lacinia quis facilisis sed sapien. Mauris varius diam vitae arcu. Sed arcu lectus auctor vitae, consectetuer et venenatis eget velit. Sed augue orci, lacinia eu tincidunt et eleifend nec lacus. Donec ultricies nisl ut felis, suspendisse potenti. Lorem ipsum ligula ut hendrerit mollis, ipsum erat vehicula risus, eu suscipit sem libero nec erat. Aliquam erat volutpat. Sed congue augue vitae neque. Nulla consectetuer porttitor pede. Fusce purus morbi tortor magna condimentum vel, placerat id blandit sit amet tortor.</p>
</div>
</td>
</tr>
</table>
</body>
</html>Tämä johtuu aika puhtaasti vaatimuksesta saada tuo alempi oikeanpuoleinen laatikko koko laatikon alareunaan. Ja toki siitä, että molempien puoliskojen tarvitsee vaikuttaa myös toistensa pituuteen. position: absolute; on käyttökelvoton, sillä se irroittaa elementin muusta sivun jatkumosta, jolloin elementin sisältö ei voi vaikuttaa muihin elementteihin.
Kokeillessani sain huomata, että height: 100% tai min-height: 100% ei saa taulukkoelementtiä venymään isäntäelementin mittaan silloin kun käytössä on standarditila. Quirks-tilassa (siis ilman doctypeä) taas törmätään valtaisaan muuriin, jossa IE unohtaa kaikki uudemmat lisäyksensä CSS:ssä ja toisaalta tuo height näyttäisi toimivan ennemminkin body-elementin korkeuden mukaan eikä sen isäntäelementin mukaan, jossa on position: relative;.
Ajatuksenani olisi siis ollut laittaa vasemmanpuoleinen elementti siten, että sen taustasta olisi huolehtinut isäntäelementti ja oikeanpuoleinen olisi tehty käyttäen display: table;, jossa on kaksi riviä ja solua sekä nuo vertical-align -määritykset. Ilman JavaScriptiä en kuitenkaan löytänyt keinoa saada taulukoitua elementtiä isännöivän elementin 100% mittaan. Operassa taisi jollain säädöillä käydä kertaalleen haluttu lopputulos, mutta samaan aikaan muut selaimet heittivät häränpyllyä, joten kokeilin jotain muuta.
Kokonaan oma asiansa sitten on, mitä järkevää käyttöä tämmöiselle rakenteelle on. Ainut visuaalisesti toimiva juju kai olisi laittaa jokin kuva näkymään tuohon tyhjään väliin, mutta se ei taas toimi mikäli sisältöä on paljon. Tällä hetkellä siis tuntuu siltä, että onhan tässä pelkästään taulukoilla toimiva tekninen kikka, mutta käyttöarvoa sille ei ole.
No, täytyy näköjään laittaa sitten taulukko. Tätähän epäilin jo aloitusviestissä...
Mutta kuitenkin kiitokset avusta!
Tässä on vielä tämä pakolla toimimaan värkätty divihirvitys:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
p {
margin: 0;
padding: 5px;
}
#t1 {
border-left: 200px solid #F00;
position: relative;
}
#t1:after,#t5:after {
clear: both;
content: '';
display: block;
}
#t2 {
float: left;
margin-left: -200px;
width: 200px;
}
#t5 {
background: #EEE;
position: relative;
width: 100%;
}
#t6 {
border-collapse: collapse;
display: table;
height: 100%;
width: 100%;
}
#t6 > div {
display: table-row;
}
#t3,#t4 {
display: table-cell;
}
#t4 {
vertical-align: bottom;
}
#t3 div {
background: #0F0;
}
#t4 div {
background: #00F;
}
</style>
</head>
<body>
<div id="t1">
<div id="t2">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed posuere interdum sem. Quisque ligula eros ullamcorper quis, lacinia quis facilisis sed sapien. Mauris varius diam vitae arcu. Sed arcu lectus auctor vitae, consectetuer et venenatis eget velit. Sed augue orci, lacinia eu tincidunt et eleifend nec lacus. Donec ultricies nisl ut felis, suspendisse potenti. Lorem ipsum ligula ut hendrerit mollis, ipsum erat vehicula risus, eu suscipit sem libero nec erat. Aliquam erat volutpat. Sed congue augue vitae neque. Nulla consectetuer porttitor pede. Fusce purus morbi tortor magna condimentum vel, placerat id blandit sit amet tortor.</p>
</div>
<div id="t5">
<div id="t6">
<div>
<div id="t3">
<div>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed posuere interdum sem. Quisque ligula eros ullamcorper quis, lacinia quis facilisis sed sapien. Mauris varius diam vitae arcu. Sed arcu lectus auctor vitae, consectetuer et venenatis eget velit. Sed augue orci, lacinia eu tincidunt et eleifend nec lacus. Donec ultricies nisl ut felis, suspendisse potenti. Lorem ipsum ligula ut hendrerit mollis, ipsum erat vehicula risus, eu suscipit sem libero nec erat. Aliquam erat volutpat. Sed congue augue vitae neque. Nulla consectetuer porttitor pede. Fusce purus morbi tortor magna condimentum vel, placerat id blandit sit amet tortor.</p>
</div>
</div>
</div>
<div>
<div id="t4">
<div>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed posuere interdum sem. Quisque ligula eros ullamcorper quis, lacinia quis facilisis sed sapien. Mauris varius diam vitae arcu. Sed arcu lectus auctor vitae, consectetuer et venenatis eget velit. Sed augue orci, lacinia eu tincidunt et eleifend nec lacus. Donec ultricies nisl ut felis, suspendisse potenti. Lorem ipsum ligula ut hendrerit mollis, ipsum erat vehicula risus, eu suscipit sem libero nec erat. Aliquam erat volutpat. Sed congue augue vitae neque. Nulla consectetuer porttitor pede. Fusce purus morbi tortor magna condimentum vel, placerat id blandit sit amet tortor.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
<script type="text/javascript">
window.onload = window.onresize = function() {
var t5 = document.getElementById('t5');
t5.style.height = 'auto';
t5.style.height = t5.offsetHeight + 'px';
}
</script>
</html>Tässä #d6 saadaan noudattamaan height: 100%; sääntöä sillä, että #t5:n korkeus määritellään täsmällisesti CSS-sääntöihin JavaScriptin keinoin. Eli siis height on pakko määritellä, ilman sitä lapsielementin prosentuaaliset arvot eivät toimi. Tuo JavaScript toimii sillä, että CSS-puolisko laskee oikean minimikoon #t5:lle (eli :after pseudoelementin määritys) ja sitten tämä laskettu korkeus napataan ja määritetään JavaScriptillä.
Tämä toimii täydellisesti Firefoxilla, Chromella ja Safarilla. Operalla ikkunan koon muuttaminen saa lopputuloksen vilkkumaan, mutta jos sitä ei lasketa niin toimii oikein. Internet Explorer 8 ei ymmärrä vertical-align: bottom; -määritystä display: table-cell; -elementille, muuten toimii oikein.
Summa summarum: taulukko on tähän parempi, koska tuo on aikamoinen divihelvetti. Tein tämän näytteen vain näyttääkseni, missä CSS:n rajat tällä hetkellä menevät. CSS3:ssa on taulukkopuolen jutut vielä pahasti keskeneräisiä, eikä sieltä siten ole napattu mitään selaimiin asti.
Hienosti te kyllä väserrätte näitä koodeja, itse aloin vasta äskön harjoittelemaan css:ssää ja tajusin, että jollainlailla se on aika yksinkertaista.
Aihe on jo aika vanha, joten et voi enää vastata siihen.