div parent groeit niet mee met div child en andersom

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Christian Snijders

Christian Snijders

18/04/2022 21:10:06
Quote Anchor link
Momenteel ben ik bezig met een contact pagina en heb nu diverse manieren geprobeerd een "vader" en "kind" div te maken.
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)
PHP script in nieuw venster Selecteer het PHP script
1
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>


de CSS

Code (php)
PHP script in nieuw venster Selecteer het PHP script
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
.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;

}




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!
 
PHP hulp

PHP hulp

26/06/2022 14:00:05
 
Ozzie PHP

Ozzie PHP

19/04/2022 02:05:44
Quote Anchor link
Sorry, geen heel net antwoord want ik heb geen tijd. Maar hiermee kun je wellicht vooruit.

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
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>


Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
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;
}
Gewijzigd op 19/04/2022 02:09:08 door Ozzie PHP
 
Jan Koehoorn

Jan Koehoorn

20/04/2022 10:48:51
Quote Anchor link
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)
PHP script in nieuw venster Selecteer het PHP script
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
<!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>
Gewijzigd op 20/04/2022 11:07:02 door Jan Koehoorn
 
Christian Snijders

Christian Snijders

24/04/2022 19:40:42
Quote Anchor link
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)
PHP script in nieuw venster Selecteer het PHP script
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
<!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>


TOP! dit was precies wat ik bedoelde, bedankt Jan! ????
Gewijzigd op 24/04/2022 19:46:38 door Christian Snijders
 
Jan Koehoorn

Jan Koehoorn

25/04/2022 15:20:16
Quote Anchor link
Graag gedaan. Mocht je willen weten hoe grid werkt, ik heb er een codepen voor gemaakt een tijdje geleden, waarin je alle uitlijnmogelijkheden dynamisch kunt wijzigen. Voor de meeste mensen werkt een beeld beter dan een technische uitleg.
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.