Arranging of Divs within Container - html

Question

I'm a florist by trade, so I was as surprised as you when my floral arrangement knowledge isn't translating to div arrangement html styles. Perhaps you can help.
Here's the html:
<div id="blocks">
<div id="block0"></div>
<div id="block1"></div>
<div id="block2"></div>
<div id="block3"></div>
<div id="block4"></div>
<div id="block5"></div>
</div>
And here's the style:
div {
outline: solid 1px black;
}
#blocks {
width:80%;
height:500px;
margin:0 auto;
background-color: #ffe;
}
#block0 {
height:10%;
width:100%;
background: red;
float: left;
}
#block1 {
height:10%;
width:25%;
background: orange;
float: left;
}
#block2 {
height:90%;
width:50%;
background: cyan;
float:left;
}
#block3 {
height:45%;
width:25%;
background: yellow;
float: right;
}
#block4 {
height:45%;
width:25%;
background: green;
float: left;
}
#block5 {
height:80%;
width:25%;
background: magenta;
float: left;
}
I'd love for the top of block5 to slide right up against the bottom of block1 and an explanation of its behavior. Thank you.
Here is the fiddle for this

Answer 1

It's going to the bottom beacuse you are floating to the left several elements that are before your block 5. You can remove the float: left to the block 5, set a position: relative and top: 20% (this will place the block 5 20% top relative to the blocks container)
#block5 {
height:80%;
width:25%;
background: magenta;
position: relative;
top: 20%;
}

Answer 2

In another words, block5 is going under because you already used up all the available width space with previous blocks. You can relate this to your job: if you place your flower pots on the edge of your balcony and there's not enough space, the last pot falls on top of someone's head.
To avoid this you can build shelves, made with other divs. Here's a quick attempt at your code. With a little dedication you can get it better.
div {outline: solid 1px black}
#blocks {
width:80%;
margin:0 auto;
background-color: #ffe;
}
#shelve1,#shelve2,#shelve3{display:inline-block}
#shelve1 {width:21%}
#shelve2 {width:56%}
#shelve3 {width:21%}
#block0 {
height:50px;
background: red;
display:block
}
#block1 {height:50px;background: orange}
#block2 {height:450px;background: cyan}
#block3 {height:225px;background: yellow}
#block4 {height:225px;background: green}
#block5 {height:400px;background: magenta}
<div id="blocks">
<div id="block0"></div>
<div id="shelve1">
<div id="block1"></div>
<div id="block5"></div>
</div>
<div id="shelve2">
<div id="block2"></div>
</div>
<div id="shelve3">
<div id="block3"></div>
<div id="block4"></div>
</div>
</div>
Nowadays, it's also not that good idea to place your pots on a floating tray, with a gust of wind they will all fall down. CSS Tricks explains why and recommends the use of the display property.