CSS sizing div in div - html

Question

I'm trying to make a div that contains 3 div, and each div contain an img.
But I want to make the first div (top) have a height of 10% of the screen size, the second (middle) 60%, and third (bottom) 30%. And actually, they don't resize, and they have their full size.
My code is actually :
#droite
{
display:block;
float:left;
margin-left:81%;
width:19%;
height:100%;
}
.logo
{
top-margin:0%;
height:10%;
width:100%;
}
.DroiteMilieu
{
top-margin:10%;
width:100%;
max-height:60%;
height:100%;
}
.basDePage
{
top-margin:80%;
height:30%;
width:100%;
}
img
{
position:absolute;
}
(#droite is actually the big division, in which logo is the first div, droiteMilieu the second and basDePage the third one. (I will rename them soon, but I want it to work first /:) )
And the html :
<div id="droite">
<div class="logo">
<img src="logo.png" style="max-width:100%; max-height:100%; position:relative;"</img>
</div>
<div class="DroiteMilieu">
<img src="droite.PNG" style="max-width:100%; max-height:100%; position:relative;"</img>
</div>
<div class="basDePage">
<img src="minimap.png" style="max-width:100%; max-height:100%; position:relative;" </img>
</div>
</div>
I'm actually still bad with html/css, and I don't understand where my error is located. :/
Can someone help me?
EDIT [Problem Solve] :
A way to make it works is :
CSS :
html, body {
margin: 0;
height: 100%;
width:100%;
}
#droite {
display:block;
float:left;
margin-left:81%;
width:19%;
height:100%;
}
.logo {
height: 10%;
background: red;
}
.DroiteMilieu {
height: 60%;
background: blue;
}
.basDePage {
height: 30%;
background: green;
}
#droite img {
max-width: 100%;
max-height: 100%;
position: relative;
}
And HTML :
<div id="droite">
<div class="logo">
<img src="logo.png" style="width:100%; height:100%;">
</div>
<div class="DroiteMilieu">
<img src="droite.PNG" style="width:100%; height:100%;">
</div>
<div class="basDePage">
<img src="minimap.png" style="width:100%; height:100%;">
</div>
</div>

Answer 1

Here is a solution for you.
You don't need margin top and width, as they default to 100% width and stack on top.
To make the floated div to have 100% height, the body needs too, so I added that.
html, body {
margin: 0;
height: 100%;
}
#droite {
display:block;
float:left;
margin-left:81%;
width:19%;
height:100%;
}
.logo {
height: 10%;
background: red;
}
.DroiteMilieu {
height: 60%;
background: blue;
}
.basDePage {
height: 30%;
background: green;
}
#droite img {
max-width: 100%;
max-height: 100%;
position: relative;
}
<div id="droite">
<div class="logo">
<img src="logo.png">
</div>
<div class="DroiteMilieu">
<img src="droite.PNG">
</div>
<div class="basDePage">
<img src="minimap.png">
</div>
</div>

Answer 2

You made a few mistake, first of all, top-margin is not a valid property. You have to use margin-top.
Secondly, If you add height: 100%; you're asking your div to take 100% of the space of its parent (in this case, is your div taking 100% of the screen height?).
To answer your question, the way to do it, if your project only have to support CSS3, i'd suggest you to use the property: vh or viewport height.
Here is a little tutorial on it:
https://web-design-weekly.com/2014/11/18/viewport-units-vw-vh-vmin-vmax/
You can use it this way:
.droite{
height: 10vh; /* If you need 10% of the viewport height, then you write it this way */
}
In other words, 1vh = 1% of the viewport height.

Answer 3

You are setting height: 100% on .DroiteMilieu which inherits from droite and makes it 100%. That might push the others out.
Remove the max-height: 60% on .DroiteMilieu and set height: 60%; see what you get.
plus top-margin: is not a valid css attribute
.DroiteMilieu
{
top-margin:10%; <---- bad css
width:100%;
height: 60%; <----
}