CSS float weird behavior

Question

I have this weird behavior with float positioned elements. The parent element is 100% width, and 450px height. Child floated elements have percentage width and high. When I change the width of the window, some child element have minor changes in height.

You can test it in this fiddle : http://jsfiddle.net/matthieubrunet/jsfww2e6/1/

Try to reduce the window, and you will see the purple div act weird... In my case (Safari and Chrome), it start changing height, and then jump to the right. I suppose it's because the yellow box became slightly smaller, but why ?

HTML

<div class="metro">
    <div class="topleft">a</div>
    <div class="topright">b</div>
    <div class="middle">c</div>
    <div class="bottomleft">d</div>
</div>

CSS

    .metro {
    height: 550px;
}
.metro div {
    float: left;
}
.metro .topleft {
    background: red;
    width: 33%;
    height: 67%;
    margin-right: 1%;
}
.metro .topright {
    background: green;
    width: 66%;
    height: 33%;
    margin-bottom: 1%;
}
.metro .middle {
    width: 32%;
    height: 33%;
    background: yellow;
}
.metro .bottomright {
    background: blue;
    width: 33%;
    height: 67%;
    margin-left: 1%;
    top:  -32.5%;
    position: relative;
}
.metro .bottomleft {
    background: purple;
    width: 66%;
    height: 33%;
    margin-top: 1%;
}

Thank you very much

Answer 1

add clear: left; to .metro .bottomleft

//correct fiddle

http://jsfiddle.net/Lvk3k6gn/

http://www.w3schools.com/cssref/pr_class_clear.asp