CSS height aanpassen aan de hand van de floating divs
Ik heb een pagina gemaakt met een div die alles de inhoud van de pagina moet centeren. Deze div is de container van de hele website en is in css opgemaakt als volgt:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
.container{
background-color: #FFF;
position: relative;
width: 960px;
height: 600px;
left: 50%;
margin-top: 0;
margin-right: 0;
margin-bottom: 0;
margin-left: -480px;
}
background-color: #FFF;
position: relative;
width: 960px;
height: 600px;
left: 50%;
margin-top: 0;
margin-right: 0;
margin-bottom: 0;
margin-left: -480px;
}
In deze container zitten alle onderdelen zoals de header, menu, inhoud van de pagina en de footer.
Het probleem is dat de inhoud van de pagina weer bestaat uit 3 onderdelen die ik opgemaakt heb door middel van een float: left;
Als ik de height van de container verander in 100% klapt het hele inhoud gedeelte weg en float de inhoud boven de footer van de pagina. Graag zou ik willen dat de in pagina zich aanpast aan de inhoud en niet aan een opgegeven hoogte in css.
Hier een overzicht van de opbouw van mijn pagina:
Code (php)
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
<div class="container">
<div class="header"></div>
<div class="menu"></div>
<div class="inhoud">
<div class="inhoud-links"></div>
<div class="inhoud-midden"></div>
<div class="inhoud-rechts"></div>
</div>
<div class="footer"></div>
</div>
<div class="header"></div>
<div class="menu"></div>
<div class="inhoud">
<div class="inhoud-links"></div>
<div class="inhoud-midden"></div>
<div class="inhoud-rechts"></div>
</div>
<div class="footer"></div>
</div>
De inhoud-links, midden en rechts zijn de floatende delen. Als ik de hoogte van de container niet op een vaste pixel waarde zet of een te kleine waarde gaat de inhoud dus boven de footer drijven. Hoe kan ik dit oplossen?
Als ik meer informatie moet leveren hoor ik het wel! Alvast bedankt!
Gewijzigd op 02/09/2010 14:37:33 door Tieme Vierbergen
set container center:
Code (php)
1
2
3
4
2
3
4
background-color: #FFF;
min-height: 600px;
margin-right: auto;
width: 960px;
min-height: 600px;
margin-right: auto;
width: 960px;
Denk dat je footer ook nog float, het is het volgende element.
Gebruik een class .clear.
Code (php)
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
<div class="clear"></div>
.clear {
clear: both;
display: block;
overflow: hidden;
visibility: hidden;
width: 0;
height: 0;
}
.clear {
clear: both;
display: block;
overflow: hidden;
visibility: hidden;
width: 0;
height: 0;
}
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
<div class="container">
<div class="header"></div>
<div class="menu"></div>
<div class="inhoud">
<div class="inhoud-links"></div>
<div class="inhoud-midden"></div>
<div class="inhoud-rechts"></div>
<div class="clear"></div>
</div>
<div class="footer"></div>
</div>
<div class="header"></div>
<div class="menu"></div>
<div class="inhoud">
<div class="inhoud-links"></div>
<div class="inhoud-midden"></div>
<div class="inhoud-rechts"></div>
<div class="clear"></div>
</div>
<div class="footer"></div>
</div>
BTW je hoeft geen hoogte mee te geven aan een div die je wil floaten..
Je float altijd het eerst volgende element..
Gewijzigd op 02/09/2010 14:15:18 door Mark Beets