div parent groeit niet mee met div child en andersom

Door Christian Snijders op 18-04-2022 21:10

2.788 views

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].


<div class='contactpage'>
 <div class='left'>
  [Contactformulier]
 </div>
 <div class='right'>
  [info zoals openingstijden en bezoekadres]
 </div>
<p class='clear'></p>
</div>

de CSS


.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!

Ozzie PHP

19-04-2022 02:05 gewijzigd op 19-04-2022 02:09

Sorry, geen heel net antwoord want ik heb geen tijd. Maar hiermee kun je wellicht vooruit.


<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>


.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;
}

Jan Koehoorn

20-04-2022 10:48 gewijzigd op 20-04-2022 11:07

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.


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

Christian Snijders

24-04-2022 19:40 gewijzigd op 24-04-2022 19:46

Jan Koehoorn op 20/04/2022 10:48:51


<!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! ????

Jan Koehoorn

25-04-2022 15:20

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.

Reageren

Inloggen om te reageren