All list items (li's) are set to float:left; and the 4th li has been positioned on top of the 1st li.
I would like the 4th li to be displayed separately and not interfere with the layout of the 1st li.
Here is the desired result: http://jsfiddle.net/TomasRR/s9nQ6/6/embedded/result/
Here is the relevant code snippet: http://jsfiddle.net/TomasRR/s9nQ6/6/
<ul>
<li>
<div class="front">1</div>
<div class="back">Back</div>
</li>
<li>
<div class="front">2</div>
<div class="back">Back</div>
</li>
<li>
<div class="front">3</div>
<div class="back">Back</div>
</li>
<li>
<div class="front">4</div>
<div class="back">Back</div>
</li>
</ul>
li {
height: 150px;
width: 400px;
list-style: none;
background: red;
float: left;
margin-right: 20px;
margin-bottom: 50px;
margin-top: 10px;
}
.front, .back {
width: 100%;
height: 100%;
}
.front {
background: gray;
}
.back {
background: yellow;
}