wrapper/container mee laten groeien
Ik heb een probleempje met een container div.
Dit is de CSS:
.container
{
width: 900px;
height: auto;
margin-left: auto;
margin-right: auto;
text-align: left;
/* Tot hier, om te centreren */
border: 1px solid #000;
}
.left {
float: left;
width: 200px;
height: 300px;
border: 1px solid #F00;
}
.middle {
float: left;
width: 494px;
height: 800px;
border: 1px solid #F00;
}
.right {
float: right;
width: 200px;
height: 300px;
border: 1px solid #F00;
}
Hoe zorg ik er nu voor dat de container div automatisch de hoogte krijgt van de grootste div die erin staat?
Ik heb dit aan de .container toegevoegd:
content: ".";
display: inline-block;
{
width: 900px;
height: auto;
margin-left: auto;
margin-right: auto;
text-align: left;
/* Tot hier, om te centreren */
border: 1px solid #000;
}
Je kan daar ook dit van maken :P
.container
{
width: 900px;
min-height: 500px;
margin: 0px auto;
overflow: hidden;
text-align: left;
border: 1px solid #000;
}
Meddiecap Bronneberg op 03/06/2010 16:45:52:
Opgelost. Bedankt voor de hulp.
Ik heb dit aan de .container toegevoegd:
content: ".";
display: inline-block;
Ik heb dit aan de .container toegevoegd:
content: ".";
display: inline-block;
Wat je beter kan doen is het volgende in je css bestand erbij zetten
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
.clearfix {
display: inline-block;
}
html[xmlns] .clearfix {
display: block;
}
* html .clearfix {
height: 1%;
}
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
.clearfix {
display: inline-block;
}
html[xmlns] .clearfix {
display: block;
}
* html .clearfix {
height: 1%;
}
en in je html ipv:
Code (php)
1
<div class="container"><div class="left"></div><div class="right"></div></div>
dit er van maakt:
Code (php)
1
<div class="container clearfix"><div class="left"></div><div class="right"></div></div>
nu weet je zeker dat het in elke browser op dezelfde manier goed werkt.
Oetzie en mijn achternaam op 04/06/2010 08:57:38:
Terence Hersbach, waarom gaan kloten met domme clearfix? Je kunt ook gewoon op de container een overflow:hidden; te doen, dit heeft het zelfde effect als een clearfixt
Ik zou even wat verder zoeken, overflow:hidden heeft namelijk nadelen, ondanks dat het lijkt dat hij hetzelfde doet.
Probeer nog maar eens bijvoorbeeld een element binnen de gefloate div net over de rand van je div te positioneren..