Ik vind hier en op het internet meer dan genoeg posts met een soortgelijke vraagstelling: namelijk het positioneren van divs. Helaas nog niet over mijn specifiek probleem. In mijn geval moet ik drie blokken tonen, twee pal naast elkaar, eentje daaronder. Ik doe dit aan de hand van het volgende voorbeeld:
Zoals het hierboven staat gaat het in FF en IE goed. In mijn geval werk ik echter in een jsp pagina met een taglibrary die het nodig vind om een table te maken (jpivot, wcf) waardoor ik in mijn "divContent" div dus een tabel moet tonen. Als ik dit in Firefox doe...:
... wordt de div "divContent" ineens naast de "containerLeftRight" geplaatst. Hoe kan ik dit voorkomen? De dominspector is overigens van mening dat, nu ik een tabel heb geplaatst in "divContent", deze zich over de "containerLeftRight" bevindt.
HTML:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
| <!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> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Untitled Document</title> <style type="text/css"> <!-- #containerLeftRight { margin: 0px; padding: 0px; width: 600px; } #divLeft { margin: 0px; padding: 0px; width: 420px; background-color: #FF0000; float: left; } #divRight { margin: 0px; padding: 0px; width: 180px; background-color: #0000FF; float: left; } #divContent { margin: 0px; padding: 0px; width: 600px; } --> </style> </head> <body> <div id="containerLeftRight"> <div id="divLeft">Links</div> <div id="divRight">rechts</div> </div> <div id="divContent"> Content </div> </body> </html> |
Zoals het hierboven staat gaat het in FF en IE goed. In mijn geval werk ik echter in een jsp pagina met een taglibrary die het nodig vind om een table te maken (jpivot, wcf) waardoor ik in mijn "divContent" div dus een tabel moet tonen. Als ik dit in Firefox doe...:
HTML:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
| <!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> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Untitled Document</title> <style type="text/css"> <!-- #containerLeftRight { margin: 0px; padding: 0px; width: 600px; } #divLeft { margin: 0px; padding: 0px; width: 420px; background-color: #FF0000; float: left; } #divRight { margin: 0px; padding: 0px; width: 180px; background-color: #0000FF; float: left; } #divContent { margin: 0px; padding: 0px; width: 600px; } --> </style> </head> <body> <div id="containerLeftRight"> <div id="divLeft">Links</div> <div id="divRight">rechts</div> </div> <div id="divContent"> <table> <tr><td> Content </td></tr> </table> </div> </body> </html> |
... wordt de div "divContent" ineens naast de "containerLeftRight" geplaatst. Hoe kan ik dit voorkomen? De dominspector is overigens van mening dat, nu ik een tabel heb geplaatst in "divContent", deze zich over de "containerLeftRight" bevindt.
[ Voor 0% gewijzigd door LordSpud op 15-07-2010 10:04 . Reden: typo ]
.