Ik heb de volgende html:
Met het volgende stylesheet:
De bedoeling is dat de .box-en naast elkaar komen binnen de #content. Als je je venster kleiner maakt komen ze automagisch onder elkaar. Ze vullen dus zeg maar de breedte op van de #content. Voor zover het past.
In Mozilla heb ik geen probleem, maar in IE gaan ze er buiten lopen aan de rechter kant. Ook loopt de border van de #content niet zoals hij hoort te lopen.
Ik heb verder alleen 2 absoluut gepositioneerde div's op de pagina staan (1tje boven en 1tje rechts). Maar als ik deze weg haal is er geen verschil.
Ik loop me al een tijdje blind te staren op de code, maar er lijkt niets verkeerd (in Moz werkt het ook gewoon zoals het moet). Wat doe ik (of IE) fout? En vooral: wat doe ik er aan?
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
41
42
43
44
| <div id="content">
<div class="box">
<h3>titel1</h3>
[img]"plaatje1.png"[/img]
<ul>
<li>item1</li>
<li>item2</li>
<li>item3</li>
<li>item4</li>
</ul>
</div>
<div class="box">
<h3>titel2</h3>
[img]"plaatje2.png"[/img]
<ul>
<li>item1</li>
<li>item2</li>
<li>item3</li>
<li>item4</li>
</ul>
</div>
<div class="box">
<h3>titel3</h3>
[img]"plaatje3.png"[/img]
<ul>
<li>item1</li>
<li>item2</li>
<li>item3</li>
<li>item4</li>
</ul>
</div>
<div class="clear"> </div>
</div> |
Met het volgende stylesheet:
code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
| #content {
border : 1px solid #E9B12E;
line-height : 1.4em;
margin : 0px 150px 0px 20px;
padding : 15px;
z-index : 0;
}
.box {
border : 1px solid #CCCCCC;
float : left;
height : 500px;
margin : 10px;
padding : 10px;
width : 200px;
}
.box img {
margin : 25px;
}
.clear {
clear : left;
} |
De bedoeling is dat de .box-en naast elkaar komen binnen de #content. Als je je venster kleiner maakt komen ze automagisch onder elkaar. Ze vullen dus zeg maar de breedte op van de #content. Voor zover het past.
In Mozilla heb ik geen probleem, maar in IE gaan ze er buiten lopen aan de rechter kant. Ook loopt de border van de #content niet zoals hij hoort te lopen.
Ik heb verder alleen 2 absoluut gepositioneerde div's op de pagina staan (1tje boven en 1tje rechts). Maar als ik deze weg haal is er geen verschil.
Ik loop me al een tijdje blind te staren op de code, maar er lijkt niets verkeerd (in Moz werkt het ook gewoon zoals het moet). Wat doe ik (of IE) fout? En vooral: wat doe ik er aan?

