float left makes my box jump down - html

Question

I would like put the red box(Block E) below Block C and next to Block D, and at the same time move BLOCK C up with 1% margin between the block A and itself. I've tried with different strategies but never been able to solve the problem.
Here's my code:
.newsblockContainer {
background-color: #000000;
width: 89.2%;
margin-left: 4vw;
margin-top: 3vw;
height: 73.3vw;
overflow: hidden;
}
.blockA {
width: 59%;
height: 27vw;
background-color: #FFAE00;
margin-left: 1%;
margin-top: 1%;
float: left;
position: relative;
}
.blockB {
width: 38%;
height: 34vw;
background-color: #FFAE00;
margin-left: 1%;
margin-top: 1%;
float: left;
position: relative;
}
.blockC {
width: 59%;
height: 23vw;
margin-left: 1%;
float: left;
background-color: #FFAE00;
margin-top: -9.45%;
position: relative;
}
.blockD {
height: 36.7vw;
width: 38%;
margin-left: 1%;
background-color: #FFAE00;
float: left;
margin-top: 1%;
position: relative;
}
.blockE {
height: 15vw;
background-color: red;
position: relative;
margin-top: 1%;
width: 59%;
margin-left: 1%;
}
<div class="newsblockContainer">
<div class="blockA">
block A
</div>
<div class="blockB">
block B
</div>
<div class="blockC">
block C
</div>
<div class="blockD">
block D
</div>
<div class="blockE">
block E
</div>
</div>
Any suggestions?
Fiddle: https://jsfiddle.net/j8hg3hf1/1/

Answer 1

Use absolute positioning instead of relative positioning for the ones you need to move. You 'll need include attributes for the location in px, %, etc.
Edit:
You can keep the relative positioning and utilize the top attribute. The 1% margin thing may be slightly tricky this way but it can surely approximate it.
.blockE{
height: 15vw;
background-color: red;
position: relative;
top: 308px;
margin-top: 1%;
width: 59%;
margin-left: 1%;
}
This along with changing the .blockC to top: -10px changes the image to this.
Here's a link to how the image appears
https://i.imgur.com/zLhoPgb.png

Answer 2

Check this out. It worked. If you need modification, please comment.
.newsblockContainer {
background-color: #000000;
width: 89.2%;
margin-left: 4vw;
margin-top: 3vw;
height: 73.3vw;
overflow: hidden;
}
.blockA {
width: 59%;
height: 27vw;
background-color: green;
margin-left: 1%;
margin-top: 1%;
float: left;
}
.blockB {
width: 38%;
height: 34vw;
background-color: blue;
margin-left: 1%;
margin-top: 1%;
margin-right: 1%;
float: right;
}
.blockC {
width: 59%;
height: 23vw;
margin-left: 1%;
margin-top: 1%;
float: left;
background-color: pink;
}
.blockD {
height: 36.7vw;
width: 38%;
margin-left: 1%;
background-color: #FFAE00;
float: right;
margin-top: 1%;
margin-right: 1%;
position: relative;
}
.blockE {
height: 15vw;
background-color: red;
margin-top: 1%;
width: 59%;
float: left;
margin-left: 1%;
}
<div class="newsblockContainer">
<div class="blockA">A</div>
<div class="blockB">B</div>
<div class="blockC">C</div>
<div class="blockD">D</div>
<div class="blockE">E</div>
</div>