DIV in DIV
Ik heb een div waar ook weer meerder divjes later in moeten komen. Deze div heeft de volgende CSS code:
#container
background: none repeat scroll 0 0 white;
margin: 0 auto;
padding: 10px;
position: relative;
width: 930px;
Als ik nu meerder divjes maak lijkt het wel alsof deze divjes niet in de #container vallen.
Vaak als ze langer zijn dan blijft de #container maar een dun divje
Het lijkt wel of de rest van mijn divjes de container negeren.
#main
background: none repeat scroll 0 0 #E8E8E8;
border: 1px solid #CCCCCC;
float: left;
font-size: 80%;
padding: 10px;
position: relative;
width: 630px;
De #main div valt dus niet in de container.
Weet iemand hoe dit komt?
Thanks
Gewijzigd op 26/06/2012 13:48:08 door Eddy Achterberg
volgens mij kijk jij nu met firebug/chromeDeveloperTools waardoor je in de war raakt. ik zeg let daar niet op.
Nee nog niet geen adres. Werk lokaal.
Hoe zou ik dan deze DIV moeten noemen?
thanks!
Code (php)
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
div.clear {
width: 100%;
height: 1px;
font-size: 1px;
line-height: 1px;
clear: both;
margin: 0;
padding: 0;
}
width: 100%;
height: 1px;
font-size: 1px;
line-height: 1px;
clear: both;
margin: 0;
padding: 0;
}
Zet de clear-div onder de floatende divs, elke keer als je horizontaal een einde wilt maken aan het floaten: <div class="clear"> </div>
Je kan zo'n constructie opzetten. Als voorbeeld thumlbnails.
Code (php)
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
<div id="container">
<div class="thumb"></div>
<div class="thumb"></div>
<div class="thumb"></div>
<div class="thumb"></div>
..
<div class="clear"></div>
</div>
<div class="thumb"></div>
<div class="thumb"></div>
<div class="thumb"></div>
<div class="thumb"></div>
..
<div class="clear"></div>
</div>
Code (php)
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
#container {
width: 930px;
}
.thumb {
float: left;
width: 100px;
height: 100px;
}
.clear {
clear: both;
}
width: 930px;
}
.thumb {
float: left;
width: 100px;
height: 100px;
}
.clear {
clear: both;
}
Toevoeging op 26/06/2012 14:33:56:
ik heb op deze website van mij ook al dat probleem (www reisjezoeken nl). Je ziet dat de #wrapper, met daarin de rest van mijn divjes, niet meerekt.
Thnks!!