Floating div 100% height
http://www.levensweg.net/test.html
met code:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!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>
<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
Gewijzigd op 01/01/1970 01:00:00 door Toby hinloopen
Edit: Zo staan ze er wel in, maar zijn die float divs nog niet 100%
#page {
overflow:hidden;
width:800px;
}
Gewijzigd op 01/01/1970 01:00:00 door Michael -
Turmin schreef op 29.10.2009 11:08:
Geef #page eens een border, dan zie je dat die leeg is en daarom werkt 't niet. Die float divs staan dus niet in #page.
Edit: Zo staan ze er wel in, maar zijn die float divs nog niet 100%
#page {
overflow:hidden;
width:800px;
}
Edit: Zo staan ze er wel in, maar zijn die float divs nog niet 100%
#page {
overflow:hidden;
width:800px;
}
Leuk om te weten... maar is er geen oplossing met de genoemde beperkingen?
- Faux Columns (niet liquid als je dat wilde).
- Deze methode (erg lastig en gaat snel fout).
- Of table display (werkt niet in IE).
Pick your posion. ;)
Gewijzigd op 01/01/1970 01:00:00 door Mitchell
Mitchell schreef op 30.10.2009 04:28:
- Faux Columns (niet liquid als je dat wilde).
Hoezo niet? Je hebt best liquid faux columns.
Zie bijvoorbeeld:
http://www.addedbytes.com/css/faux-columns-for-liquid-layouts/
http://www.communitymx.com/content/article.cfm?page=1&cid=AFC58
Deze deed 't 'm. Bedankt :)