Virusscanner tips?
auto height in div werkt niet
Ik heb het middenstuk van mijn template (inhoud gedeelte) een auto height gegeven, zodat deze auto. groter word als er meer tekst in komt. Maar dit gebeurd niet.
"inhoud_left" en "inhoud_right" zijn div's binnen de "inhoud" div.
De "inhoud" div heb ik zoals je hieronder kan zien, ook een min-height gegeven van 400px.
Dit werkt, maar die word NIET groter als er meer tekst bijkomt.
Iemand een idee?
Hier het css gedeelte:
.inhoud {
background-image: url(../images/inhoud_background.png);
background-color: #464543;
background-repeat: repeat-x;
border-left: 1px solid #666; /* OUD: border-left: 3px solid #666; */
border-right: 1px solid #666;
border-bottom: 1px solid #666;
width: 800px;
height: auto;
min-height: 400px;
margin: 0 auto;
text-align: left;
position: relative; top: 126px;
}
.inhoud_left {
width: 530px;
height: auto;
margin: 0 auto;
text-align: left;
float: left;
border: 0px solid #666;
}
.inhoud_right {
width: 265px;
height: auto;
margin: 0 auto;
text-align: left;
float: right;
position: relative;
top: 8px;
border: 0px solid #666;
Alvast bedankt.
Gewijzigd op 28/11/2017 20:23:55 door Keven Vanovertveldt
Code (php)
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
<div class='inhoud'>
<div class='inhoud_left'>
Links
</div>
<div class='inhoud_right'>
Rechts
</div>
</div>
<div class='inhoud_left'>
Links
</div>
<div class='inhoud_right'>
Rechts
</div>
</div>
Een quick fix is om net voor het eind van de sluiting van de "inhoud" div een "clear:both" div toe te voegen:
Code (php)
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
<div class='inhoud'>
<div class='inhoud_left'>
Links
</div>
<div class='inhoud_right'>
Rechts
</div>
<div style='clear:both'><!-- deze toevoegen --></div>
</div>
<div class='inhoud_left'>
Links
</div>
<div class='inhoud_right'>
Rechts
</div>
<div style='clear:both'><!-- deze toevoegen --></div>
</div>
Gewijzigd op 28/11/2017 21:24:44 door Rob Doemaarwat
Had deze nog nooit gebruikt :o
Code (php)
1
2
3
4
5
2
3
4
5
.clearfix:after {
content: "";
display: table;
clear: both;
}
content: "";
display: table;
clear: both;
}