Ik heb op een website (in aanbouw) een aantal div's gebruikt die naast elkaar moeten floaten. Dit gaat meestal goed, maar soms gaat de 3e (de meest rechtse) div ineens naar beneden. Het ligt niet aan de ruimte van het browservenster, want ik heb er een div omheen gezet die een vaste grote heeft. Het probleem treedt volgens ook alleen op in Firefox, maar het kan zijn dat ik het alleen in deze browser heb gezien omdat ik daar het meeste in ontwikkel en dus ook daar het meeste controleer.
De bijbehorende CSS:
Meestal staat het na een refresh weer goed, maar het is natuurlijk geen gezicht dat dit gebeurt. Weet iemand waar dat aan kan liggen?
code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| <div id="container">
<div id="Leftside">
{Menu}
</div>
<div class="main">
{Content}
</div>
<div id="Rightside">
{Content}
</div>
<div style="clear: both;"></div>
</div> |
De bijbehorende CSS:
code:
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
| #container {
margin-top: -80px;
margin-left: 0px;
padding: 0 0 0 0;
width: 990px;
text-align: left;
border: 0px;
display: table;
}
div.main {
background: url('gfx/bg.jpg') repeat-y left;
border: 1px solid #a9a9a9;
background-color: #fff;
display: block;
padding: 5px;
text-align: justify;
z-index: 2;
width: 555px;
float: left;
overflow: hidden;
height: 100%;
}
#Leftside {
width: 150px;
float: left;
margin: 0px;
margin-right: 8px;
}
#Rightside {
width: 240px;
float: left;
background-color: #5999AB;
margin: 0px;
margin-left: 8px;
padding: 5px;
height: 100%;
display: block;
} |
Meestal staat het na een refresh weer goed, maar het is natuurlijk geen gezicht dat dit gebeurt. Weet iemand waar dat aan kan liggen?
:strip_exif()/u/4086/avatar3.gif?f=community){kind=avatar}
/u/62737/crop59ad813b7f8af_cropped.png?f=community)