对齐Div的错误

Question

我如何让所有四个'行'类别紧挨着排列？我遇到了很多麻烦...当我编辑任何边距时，格式和间距变得非常奇怪。

http://jsfiddle.net/busterroni/wBcWc/

.rowone{
height:100px;
width:100px;
background-color:blue;
}

.rowtwo{
  position:relative;
margin-bottom:500px;
margin-left:100px;
margin-top:-500px;
height:100px;
width:100px;
background-color:green;
}

.rowthree{
  position:relative;
margin-bottom:0px;
margin-left:200px;
margin-top:px;
height:100px;
width:100px;
background-color:yellow;
}

.rowfour{
  position:relative;
margin-bottom:0px;
margin-left:200px;
margin-top:px;
height:100px;
width:100px;
background-color:orange;
}

.rowfive{
  position:relative;
margin-bottom:0px;
margin-left:200px;
margin-top:px;
height:100px;
width:100px;
background-color:red;
}

div {
background-color:transparent;
position: relative;
width: 100px;
height:100px;
}
div:hover {
-webkit-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
-ms-transition: all .5s ease-in-out;
-o-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
background-color:blue;
}