# Child div wont calculate percentages correctly

Yes, this question got solved already several times. As far as i understand, the child div doesn’t know the relation of the 100%, kind of like “100% of what?”

But in my application, the parent div (height marked in red) has a relation. It takes exactly 50% of its parents height (height marked in blue)

So in the child div, when i set the margin-top of the text to 32%, the text is at about 50% of the parents height (marked in green) and when i set it to a little bit more than 50% the text overflows the div

I dont really know how to solve this so im asking you guys, hope you can help me ^^

btw: I’ve just realized that the pink mark is irrellevant so just ignore it 🙂

<div id="wrapper">
<div class="leftItem">
<div class="image">
<p [ngStyle]="{
'margin-left': xpos+'%',
'margin-top': ypos+'%'
}">{{ text }}</p>
</div>
</div>
</div>

.leftItem {
height: 95%;
width: 50%;
float: left;
display: flex;
align-items: center;
justify-content: center;
}
.image {
display: block;
width: 90%;
height: 40vh; /*Also tried %*/
margin-top: -8%;
background-color: transparent;
border-style: solid;
border-width: 1px;
overflow: hidden;
}
#wrapper {
float: left;
width: 96%;
height: 94%;
margin: 2%;
background-color: white;