Floated divs buiten parent
Even een kort vraagje. Ik heb het volgende:
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
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
<div id="randrecipe">
<div class="topbox">
<p>Chipolatapudding</p>
</div>
<div class="pic">
<img src="images/CaribbeanCocktail.png" alt="Caribbean Cocktail" width="104" height="83" />
</div>
<div id="inforecipe">
<b>Ingrediënten</b><br />
<ul>
<li>3 el kokoslikeur</li>
<li>2 el rum</li>
<li>ananassap</li>
</ul>
<b>Instructies</b><br />
<ul>
<li>Kokoslikeur en rum in mooi glas schenken.</li>
<li>Glas opvullen met ananassap.</li>
</ul><br />
Voor 1 glas, 45 kcal p.p.
</div>
<div id="infobox">
<div class="topbox">
<p>Informatie over dit recept</p>
</div>
<div class="user">
<b>Door <br />gebruiker</b> Dieet
</div>
<div class="rating">
<b>Waardering</b> 2,5 sterren
</div>
</div>
</div>
<div class="topbox">
<p>Chipolatapudding</p>
</div>
<div class="pic">
<img src="images/CaribbeanCocktail.png" alt="Caribbean Cocktail" width="104" height="83" />
</div>
<div id="inforecipe">
<b>Ingrediënten</b><br />
<ul>
<li>3 el kokoslikeur</li>
<li>2 el rum</li>
<li>ananassap</li>
</ul>
<b>Instructies</b><br />
<ul>
<li>Kokoslikeur en rum in mooi glas schenken.</li>
<li>Glas opvullen met ananassap.</li>
</ul><br />
Voor 1 glas, 45 kcal p.p.
</div>
<div id="infobox">
<div class="topbox">
<p>Informatie over dit recept</p>
</div>
<div class="user">
<b>Door <br />gebruiker</b> Dieet
</div>
<div class="rating">
<b>Waardering</b> 2,5 sterren
</div>
</div>
</div>
En de CSS:
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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
#randrecipe {
width: 100%;
height: auto;
margin: 25px 0 0 0;
border: 1px solid #FFE4C4;
}
#randrecipe .pic {
margin: 10px 50% 10px 50%;
}
#randrecipe #inforecipe {
margin: 0 0 5px 5px;
float: left;
height: auto;
}
#randrecipe #inforecipe ul li {
margin: 0 0 13px 0;
}
#randrecipe #infobox {
float: right;
height: auto;
}
width: 100%;
height: auto;
margin: 25px 0 0 0;
border: 1px solid #FFE4C4;
}
#randrecipe .pic {
margin: 10px 50% 10px 50%;
}
#randrecipe #inforecipe {
margin: 0 0 5px 5px;
float: left;
height: auto;
}
#randrecipe #inforecipe ul li {
margin: 0 0 13px 0;
}
#randrecipe #infobox {
float: right;
height: auto;
}
Het probleem:
Klik voor originele grootte
Je ziet dat de divs 'inforecipe' en 'infobox' die respectievelijk float: left; en float: right; hebben buiten de parent: 'randrecipe' vallen.
Wat moet er verandert worden aan de CSS code om dat te fixen?
Mvg,
GaMer13
Gewijzigd op 01/01/1970 01:00:00 door GaMer B
Gesponsorde koppelingen:
onderaan in <div id="randrecipe"></div>
zet je <div class="spacer"></div> met de waarde
.spacer {clear:both;}
dit zal je probleem oplossen.
Gewijzigd op 01/01/1970 01:00:00 door Rein de Vries
