Op mijn site heb ik (naast vele andere elementen) 3 divs:
De bedoeling is dat beide divs de maximale hoogte van de containerdiv aannemen. Als links dus hoger is, moet rechts de hoogte van links aannemen en andersom. Let wel: het is niet de bedoeling dat 100% van de schermhoogte in beslag wordt genomen: de maximale hoogte van left of right is vaak namelijk minder dan de grootte van het gemiddelde scherm, dus zou het onzinnig zijn om html en body op 100% te zetten.
Op dit moment lukt het me niet en ben ik geneigd om op tabellen over te stappen. Ik kies echter liever voor een nette CSS optie. Heeft iemand enig idee hoe dit te fixen?
HTML:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| <body> <div class="container"> <div class="left"> Blabla </div> <div class="right"> Blabla<br> Blabla<br> Blabla<br> </div> </div> </body> |
Cascading Stylesheet:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
| div.container { width: 100%; height: 100%; } div.left { width: 200px; float: left; height: 100% } div.right { width: 200px; float: right; height: 100% } |
De bedoeling is dat beide divs de maximale hoogte van de containerdiv aannemen. Als links dus hoger is, moet rechts de hoogte van links aannemen en andersom. Let wel: het is niet de bedoeling dat 100% van de schermhoogte in beslag wordt genomen: de maximale hoogte van left of right is vaak namelijk minder dan de grootte van het gemiddelde scherm, dus zou het onzinnig zijn om html en body op 100% te zetten.
Op dit moment lukt het me niet en ben ik geneigd om op tabellen over te stappen. Ik kies echter liever voor een nette CSS optie. Heeft iemand enig idee hoe dit te fixen?