div parent groeit niet mee met div child en andersom
Vader zijn grootte moet mee gaan met de grootste kind div, de kleinste kind div zal uiteindelijk even hoog moeten zijn als vader.
Het stukje html, het formulier heb ik er even uitgehaald en vervangen door [contactformulier].
Code (php)
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
<div class='contactpage'>
<div class='left'>
[Contactformulier]
</div>
<div class='right'>
[info zoals openingstijden en bezoekadres]
</div>
<p class='clear'></p>
</div>
<div class='left'>
[Contactformulier]
</div>
<div class='right'>
[info zoals openingstijden en bezoekadres]
</div>
<p class='clear'></p>
</div>
de 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
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
.contactpage{
position:relative;
top:20px;
border-radius:5px;
left:20%;
right:20%;
width:60%;
box-shadow: 0 0 8px rgba(0,0,0,0.2);
margin-bottom:110px;
}
.contactpage .left{
position:absolute;
top:0px;
left:0px;
bottom:0px;
width:80%;
}
.contactpage .right{
position:absolute;
top:0px;
right:0px;
bottom:0px;
width:20%;
}
.clear{
clear:both;
margin:0px;
padding:0px;
height:0px;
}
position:relative;
top:20px;
border-radius:5px;
left:20%;
right:20%;
width:60%;
box-shadow: 0 0 8px rgba(0,0,0,0.2);
margin-bottom:110px;
}
.contactpage .left{
position:absolute;
top:0px;
left:0px;
bottom:0px;
width:80%;
}
.contactpage .right{
position:absolute;
top:0px;
right:0px;
bottom:0px;
width:20%;
}
.clear{
clear:both;
margin:0px;
padding:0px;
height:0px;
}
Op "height:100%;" reageren de div's niet.
Nu weet ik wel dat er een display:table; en display:table-column; functie bestaat maar ook daar verdwijnt "vader"
Zoals die code nu is, verdwijnt "vader" omdat deze niet mee groeit met de kinderen.
Zal ongetwijfeld ergens wel iets fout hebben gedaan maar zelf kan ik het niet vinden.
Ziet iemand waar ik de fout heb gemaakt en wat ik kan doen zodat right en left mee groeien en vader daar daaromheen blijven staan?
Alvast bedankt!
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<div class='contactpage'>
<div class='left'>
[Contactformulier]<br>
naam<br>
mail<br>
opmerking
</div>
<div class='right'>
[info zoals openingstijden en bezoekadres]
<br>SuperShop<br>
Koopstraat 1<br>
Amsterdam<br>
<br>Geopend: 24 uur per dag
</div>
</div>
<div class='left'>
[Contactformulier]<br>
naam<br>
mail<br>
opmerking
</div>
<div class='right'>
[info zoals openingstijden en bezoekadres]
<br>SuperShop<br>
Koopstraat 1<br>
Amsterdam<br>
<br>Geopend: 24 uur per dag
</div>
</div>
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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
.contactpage{
top:20px;
border-radius:5px;
left:20%;
right:20%;
width:60%;
box-shadow: 0 0 8px rgba(0,0,0,0.2);
margin-bottom:110px;
background-color: red;
}
.contactpage .left{
width:80%;
background-color: blue;
display: table-cell;
}
.contactpage .right{
width:20%;
background-color: yellow;
display: table-cell;
}
top:20px;
border-radius:5px;
left:20%;
right:20%;
width:60%;
box-shadow: 0 0 8px rgba(0,0,0,0.2);
margin-bottom:110px;
background-color: red;
}
.contactpage .left{
width:80%;
background-color: blue;
display: table-cell;
}
.contactpage .right{
width:20%;
background-color: yellow;
display: table-cell;
}
Gewijzigd op 19/04/2022 02:09:08 door Ozzie PHP
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
40
41
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
40
41
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css">
.contactpage {
display: grid;
grid-template-columns: 1fr 1fr;
border: 1px solid blue;
}
.left {
background: lightseagreen;
}
.right {
background: lightblue;
}
</style>
</head>
<body>
<div class='contactpage'>
<div class='left'>
[Contactformulier]<br>
naam<br>
mail<br>
opmerking
</div>
<div class='right'>
[info zoals openingstijden en bezoekadres]
<br>SuperShop<br>
Koopstraat 1<br>
Amsterdam<br>
<br>Geopend: 24 uur per dag
</div>
</div>
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css">
.contactpage {
display: grid;
grid-template-columns: 1fr 1fr;
border: 1px solid blue;
}
.left {
background: lightseagreen;
}
.right {
background: lightblue;
}
</style>
</head>
<body>
<div class='contactpage'>
<div class='left'>
[Contactformulier]<br>
naam<br>
mail<br>
opmerking
</div>
<div class='right'>
[info zoals openingstijden en bezoekadres]
<br>SuperShop<br>
Koopstraat 1<br>
Amsterdam<br>
<br>Geopend: 24 uur per dag
</div>
</div>
</body>
</html>
Gewijzigd op 20/04/2022 11:07:02 door Jan Koehoorn
Jan Koehoorn op 20/04/2022 10:48:51:
Tip: als het om dit soort problemen gaat, vergeet dan zo snel mogelijk de oude trucs zoals position absolute, floats, clears etc. Je kunt tegenwoordig met CSS grid en FlexBox zo ongeveer alle kanten op.
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
40
41
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
40
41
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css">
.contactpage {
display: grid;
grid-template-columns: 1fr 1fr;
border: 1px solid blue;
}
.left {
background: lightseagreen;
}
.right {
background: lightblue;
}
</style>
</head>
<body>
<div class='contactpage'>
<div class='left'>
[Contactformulier]<br>
naam<br>
mail<br>
opmerking
</div>
<div class='right'>
[info zoals openingstijden en bezoekadres]
<br>SuperShop<br>
Koopstraat 1<br>
Amsterdam<br>
<br>Geopend: 24 uur per dag
</div>
</div>
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css">
.contactpage {
display: grid;
grid-template-columns: 1fr 1fr;
border: 1px solid blue;
}
.left {
background: lightseagreen;
}
.right {
background: lightblue;
}
</style>
</head>
<body>
<div class='contactpage'>
<div class='left'>
[Contactformulier]<br>
naam<br>
mail<br>
opmerking
</div>
<div class='right'>
[info zoals openingstijden en bezoekadres]
<br>SuperShop<br>
Koopstraat 1<br>
Amsterdam<br>
<br>Geopend: 24 uur per dag
</div>
</div>
</body>
</html>
TOP! dit was precies wat ik bedoelde, bedankt Jan! ????
Gewijzigd op 24/04/2022 19:46:38 door Christian Snijders