http://www.levensweg.net/test.html
met code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test</title>
<style>
#page {
width:800px;
}
</style>
</head>
<body>
<div id="page">
<div style="float:left;width:18px;border:1px solid #000;height:100%;"> </div>
<div style="float:left;width:138px;border:1px solid #000;">Sidebar<br/>Sidebar<br/>Sidebar<br/>Sidebar<br/>Sidebar<br/>Sidebar<br/></div>
<div style="float:left;width:18px;border:1px solid #000;height:100%;"> </div>
<div style="float:left;width:598px;border:1px solid #000;">Content<br/>Content<br/>Content<br/>Content<br/>Content<br/>Content<br/>Content<br/>Content<br/>Content<br/></div>
<div style="float:left;width:18px;border:1px solid #000;height:100%;"> </div>
</div>
</body>
</html>
Dit is een schematisch voorbeeld van een website waar ik een probleempje mee heb:
Ik wil namelijk dat de 3 tussenliggende divjes (met de erin) de hoogte aannemen van het hoogste element.
Dit is makkelijk te realiseren door natuurlijk een table-layout te gebruiken. Helaas is dat in dit geval niet mogelijk in de omgeving waar de website mee gemaakt is.
Het enige wat ik kan doen is:
-De CSS aanpassen
-Content toevoegen in de 5 <div>'s
-De style-attribute aanpassen.
-Classnames toevoegen aan de <div>jes. (met uitzondering van #page)
Meer kan ik niet aanpassen ivm. beperkingen van de omgeving.
Ik zat zelf te puzzelen met display:table, maar had daar niet echt veel succes mee.
Weten jullie een oplossing?
Liefst 1tje zonder javascript. Met javascript weet ik het namelijk wel op te lossen, maar ik wil het zonder javascript doen. Ook dit ivm. de beperkingen van de omgeving.
==Waarom?==
De 3 divjes bevatten een background image die als border functioneren: een background jpg'tje met repeat-y
