Why are my floated elements displaying like "stairs"? - html

Question

I have 10 squares that are floated, and in a wrapper. I wrap each square in an anchor tag so that I can link the squares.
So I have a wrapper and inside I have 10 of these elements:
.square {
float: left;
width: calc(20% - 16px);
padding-bottom: calc(20% - 16px);
overflow: hidden;
background-image: url(myimg.jpg);
border-radius: 5%;
background-size: cover;
position: relative;
z-index: 10;
margin: 8px;
transition: ease all .3s;
color: rgb(255, 230, 20);
}
.content {
position: absolute;
width: 88%;
height: 89%;
top: 6%;
left: 6%;
cursor: pointer;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
border-radius: 8px;
}
<div class="productsWrap">
<a href="mylink.com">
<div class="square">
<div class="content content1">
<span class="squareTitle">Bending</span>
</div>
</div>
</a>
//and then ten more of the same anchor tags
</div>
The first 5 squares display like stairs, and the five remaining that are in the second row display properly inline.

Answer 1

The problem is you are floating .square element but expecting .content to be floating. Here is the answer:
Improved HTML
<div class="productsWrap">
<div class="square">
<a href="mylink.com">
<div class="content content1">
<span class="squareTitle">Bending</span>
</div>
</a>
</div>
<div class="square">
<a href="mylink.com">
<div class="content content1">
<span class="squareTitle">Bending</span>
</div>
</a>
</div>
<div class="square">
<a href="mylink.com">
<div class="content content1">
<span class="squareTitle">Bending</span>
</div>
</a>
</div>
<div class="square">
<a href="mylink.com">
<div class="content content1">
<span class="squareTitle">Bending</span>
</div>
</a>
</div>
<div class="square">
<a href="mylink.com">
<div class="content content1">
<span class="squareTitle">Bending</span>
</div>
</a>
</div>
<div class="square">
<a href="mylink.com">
<div class="content content1">
<span class="squareTitle">Bending</span>
</div>
</a>
</div>
<div class="square">
<a href="mylink.com">
<div class="content content1">
<span class="squareTitle">Bending</span>
</div>
</a>
</div>
<div class="square">
<a href="mylink.com">
<div class="content content1">
<span class="squareTitle">Bending</span>
</div>
</a>
</div>
<div class="square">
<a href="mylink.com">
<div class="content content1">
<span class="squareTitle">Bending</span>
</div>
</a>
</div>
<div class="square">
<a href="mylink.com">
<div class="content content1">
<span class="squareTitle">Bending</span>
</div>
</a>
</div>
</div>
Improved CSS
.square {
float: left;
width: calc(20% - 16px);
padding-bottom: calc(20% - 16px);
overflow: hidden;
background: #f00;
border-radius: 5%;
background-size: cover;
position: relative;
z-index: 10;
margin: 8px;
transition: ease all .3s;
color: rgb(255, 230, 20);
}
.square a {
color:yellow;
}
.content {
position: absolute;
width: 88%;
height: 89%;
top: 6%;
left: 6%;
cursor: pointer;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
border-radius: 8px;
}
And Here is the result
enter image description here