3 divs langs elkaar - probleem
Ik heb het volgende:
http://bierens42.woelmuis.nl/test.php
Als ik nu mijn container een border van 1 geef, staat alles netjes langs elkaar, bovenkanten gelijk.
Maar zodra ik de border weghaal verspringt mijn middelste kolom.
Kan iemand mij vertellen waar dit aan ligt, en hoe ik dit zou kunnen verhelpen?
Alvast bedankt.
CSS Code:
Code (php)
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
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
<?
#container {
border:1px solid black;
margin-left:auto;
margin-right:auto;
width:1041px;
height:550px;
box-sizing: border-box;
}
#tabelpresentatieonderhoud {
margin:10px;
padding:15px;
border:1px solid grey;
vertical-align:top;
text-align:left;
width:360px;
height:500px;
float:left;
overflow-y:scroll;
box-sizing: border-box;
}
#tabelinstellingen {
margin:10px;
padding:15px;
border:1px solid grey;
vertical-align:top;
text-align:left;
height:500px;
width:280px;
overflow-y:scroll;
box-sizing: border-box;
}
#tabelmelding {
margin:10px;
padding:15px;
border:1px solid grey;
vertical-align:top;
text-align:left;
height:500px;
width:280px;
float:right;
overflow-y:scroll;
box-sizing: border-box;
}
?>
#container {
border:1px solid black;
margin-left:auto;
margin-right:auto;
width:1041px;
height:550px;
box-sizing: border-box;
}
#tabelpresentatieonderhoud {
margin:10px;
padding:15px;
border:1px solid grey;
vertical-align:top;
text-align:left;
width:360px;
height:500px;
float:left;
overflow-y:scroll;
box-sizing: border-box;
}
#tabelinstellingen {
margin:10px;
padding:15px;
border:1px solid grey;
vertical-align:top;
text-align:left;
height:500px;
width:280px;
overflow-y:scroll;
box-sizing: border-box;
}
#tabelmelding {
margin:10px;
padding:15px;
border:1px solid grey;
vertical-align:top;
text-align:left;
height:500px;
width:280px;
float:right;
overflow-y:scroll;
box-sizing: border-box;
}
?>
Gewijzigd op 12/11/2012 19:53:35 door D B
Heb dit nu ook op de container staan (waar de andere 3 kolommen in zouden moeten komen)
Hierboven heb ik de code even gewijzigd.
.box{display:inline-block;}
<div class="box" id="tabelpresentatieonderhoud"></div>
<div class="box" id="tabelinstellingen"></div>
<div class="box" id="tabelmelding"></div>
Dank u!