div rekt niet mee
Ik heb nu een heel raar probleem, ik hem mijn photoshop ontwerp gebased en nu is het feit dat er een border omheen moet. De content heb ik in 1 div gezet genaamd content, hierin zit dan weer meerdere divs (met het float attribuut dat roet in het eten gooit). Het probleem is dat de content div niet hoger/lager wordt (en dus de rand groter maakt. Ik zal de bijbehorende code posten
HTML:
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
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
<div id="content">
<div class="categorie">
<div class="categorie-top">
Auto's
</div>
<div class="links">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas nulla ligula, faucibus ac sodales et, porta in erat. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla nibh lectus, imperdiet gravida pharetra in, condimentum et dolor. Nam vestibulum leo quis nisi sodales nec porttitor massa mollis. Duis facilisis, libero nec ultrices placerat, ante diam tincidunt turpis, imperdiet sollicitudin velit eros non augue. Duis a lorem eu massa ultricies dapibus quis semper magna. Integer et leo id velit accumsan congue. Proin eget neque metus. Curabitur rhoncus, felis in tincidunt venenatis, arcu est dignissim ipsum, non lacinia neque sapien at mauris. Sed ullamcorper viverra ipsum id condimentum. Nulla vitae orci tortor, vel tristique quam. Morbi molestie, libero sed dictum venenatis, nunc diam tincidunt magna, nec rutrum lacus dui nec metus.
</div>
<div class="endlinks"></div>
</div>
<div class="categorie">
<div class="categorie-top">
Computers
</div>
<div class="links">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas nulla ligula, faucibus ac sodales et, porta in erat. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla nibh lectus, imperdiet gravida pharetra in, condimentum et dolor. Nam vestibulum leo quis nisi sodales nec porttitor massa mollis. Duis facilisis, libero nec ultrices placerat, ante diam tincidunt turpis, imperdiet sollicitudin velit eros non augue. Duis a lorem eu massa ultricies dapibus quis semper magna. Integer et leo id velit accumsan congue. Proin eget neque metus. Curabitur rhoncus, felis in tincidunt venenatis, arcu est dignissim ipsum, non lacinia neque sapien at mauris. Sed ullamcorper viverra ipsum id condimentum. Nulla vitae orci tortor, vel tristique quam. Morbi molestie, libero sed dictum venenatis, nunc diam tincidunt magna, nec rutrum lacus dui nec metus.
</div>
<div class="endlinks"></div>
</div>
<div class="categorie">
<div class="categorie-top">
Reclame
</div>
<div class="links">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas nulla ligula, faucibus ac sodales et, porta in erat. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla nibh lectus, imperdiet gravida pharetra in, condimentum et dolor. Nam vestibulum leo quis nisi sodales nec porttitor massa mollis. Duis facilisis, libero nec ultrices placerat, ante diam tincidunt turpis, imperdiet sollicitudin velit eros non augue. Duis a lorem eu massa ultricies dapibus quis semper magna. Integer et leo id velit accumsan congue. Proin eget neque metus. Curabitur rhoncus, felis in tincidunt venenatis, arcu est dignissim ipsum, non lacinia neque sapien at mauris. Sed ullamcorper viverra ipsum id condimentum. Nulla vitae orci tortor, vel tristique quam. Morbi molestie, libero sed dictum venenatis, nunc diam tincidunt magna, nec rutrum lacus dui nec metus.
</div>
<div class="endlinks"></div>
</div>
</div>
<div class="categorie">
<div class="categorie-top">
Auto's
</div>
<div class="links">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas nulla ligula, faucibus ac sodales et, porta in erat. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla nibh lectus, imperdiet gravida pharetra in, condimentum et dolor. Nam vestibulum leo quis nisi sodales nec porttitor massa mollis. Duis facilisis, libero nec ultrices placerat, ante diam tincidunt turpis, imperdiet sollicitudin velit eros non augue. Duis a lorem eu massa ultricies dapibus quis semper magna. Integer et leo id velit accumsan congue. Proin eget neque metus. Curabitur rhoncus, felis in tincidunt venenatis, arcu est dignissim ipsum, non lacinia neque sapien at mauris. Sed ullamcorper viverra ipsum id condimentum. Nulla vitae orci tortor, vel tristique quam. Morbi molestie, libero sed dictum venenatis, nunc diam tincidunt magna, nec rutrum lacus dui nec metus.
</div>
<div class="endlinks"></div>
</div>
<div class="categorie">
<div class="categorie-top">
Computers
</div>
<div class="links">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas nulla ligula, faucibus ac sodales et, porta in erat. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla nibh lectus, imperdiet gravida pharetra in, condimentum et dolor. Nam vestibulum leo quis nisi sodales nec porttitor massa mollis. Duis facilisis, libero nec ultrices placerat, ante diam tincidunt turpis, imperdiet sollicitudin velit eros non augue. Duis a lorem eu massa ultricies dapibus quis semper magna. Integer et leo id velit accumsan congue. Proin eget neque metus. Curabitur rhoncus, felis in tincidunt venenatis, arcu est dignissim ipsum, non lacinia neque sapien at mauris. Sed ullamcorper viverra ipsum id condimentum. Nulla vitae orci tortor, vel tristique quam. Morbi molestie, libero sed dictum venenatis, nunc diam tincidunt magna, nec rutrum lacus dui nec metus.
</div>
<div class="endlinks"></div>
</div>
<div class="categorie">
<div class="categorie-top">
Reclame
</div>
<div class="links">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas nulla ligula, faucibus ac sodales et, porta in erat. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla nibh lectus, imperdiet gravida pharetra in, condimentum et dolor. Nam vestibulum leo quis nisi sodales nec porttitor massa mollis. Duis facilisis, libero nec ultrices placerat, ante diam tincidunt turpis, imperdiet sollicitudin velit eros non augue. Duis a lorem eu massa ultricies dapibus quis semper magna. Integer et leo id velit accumsan congue. Proin eget neque metus. Curabitur rhoncus, felis in tincidunt venenatis, arcu est dignissim ipsum, non lacinia neque sapien at mauris. Sed ullamcorper viverra ipsum id condimentum. Nulla vitae orci tortor, vel tristique quam. Morbi molestie, libero sed dictum venenatis, nunc diam tincidunt magna, nec rutrum lacus dui nec metus.
</div>
<div class="endlinks"></div>
</div>
</div>
De categorie div scaled wel mee met de lorem ipsum maar de content div scaled niet met de categorie div.
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
26
27
28
29
30
31
32
33
34
35
36
37
38
39
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
37
38
39
#content{
display: block;
width: 768px;
background-image: url(../img/pageborder.png);
background-repeat: repeat-y;
padding: 0 39px 0 39px;
}
.categorie{
float:left;
display:block;
padding: 15px 35px 0 0;
width:200px;
}
.categorie-top{
padding: 4px 0 0 0;
width: 200px;
height: 28px;
background-image: url(../img/categoriebg.png);
background-repeat:repeat-x;
color: #fff;
font-size: 20px;
font-weight: bold;
text-align: center;
}
.links{
width: 196px;
padding: 3px;
background-image:url(../img/link-border.png);
background-repeat:repeat-y;
}
.endlinks{
float:none;
clear:both;
padding: 0;
margin: 0;
height: 2px;
background-image:url(../img/link-end.png);
background-repeat: no-repeat;
}
display: block;
width: 768px;
background-image: url(../img/pageborder.png);
background-repeat: repeat-y;
padding: 0 39px 0 39px;
}
.categorie{
float:left;
display:block;
padding: 15px 35px 0 0;
width:200px;
}
.categorie-top{
padding: 4px 0 0 0;
width: 200px;
height: 28px;
background-image: url(../img/categoriebg.png);
background-repeat:repeat-x;
color: #fff;
font-size: 20px;
font-weight: bold;
text-align: center;
}
.links{
width: 196px;
padding: 3px;
background-image:url(../img/link-border.png);
background-repeat:repeat-y;
}
.endlinks{
float:none;
clear:both;
padding: 0;
margin: 0;
height: 2px;
background-image:url(../img/link-end.png);
background-repeat: no-repeat;
}
Hopelijk kan iemand mij helpen
Code (php)
1
2
3
4
5
2
3
4
5
#content:after {
content: '';
display: block;
clear: both;
}
content: '';
display: block;
clear: both;
}
Met mijn clear fix methode is dit ook opgelost.
Als je niet begrijpt wat ik bedoel heb ik ooit een demo gemaakt: http://waldio.webatu.com/CSS/clearoroverflow.html
Code (php)
1
content: '';
Dat doet toch niets? Waarom is dat nodig? Nooit gezien dat je
Code (php)
1
clear: both;
Alleen als ik een clear:; zie, is het wel altijd met content:;.
Vraag is: waarom?
(dit is mijn suggestie/gedachte) De :after plaatst dus een stukje css/code achter de huidige inhoud van de content div, van dat stukje zet je de content van niet bestaand naar ''(wel bestaand maar niks) hier door zal de #content div verder oprekken en dus de border weergeven
Code (php)
1
2
3
4
2
3
4
<div id=container>
<!-- ... -->
<div class=clear></div>
</div>
<!-- ... -->
<div class=clear></div>
</div>
Kun je wel gewoon:
Code (php)
1
.clear { clear: both; }
Gebruiken.
Alleen dat is niet semantisch en daarom gebruik ik altijd pseudo elements voor dit. Uitleg over pseudo elements: http://www.phphulp.nl/php/forum/topic/css-schuine-div/82882/#589542