Тэг HR не отображается в нужном месте

Question

Я пытаюсь добавить тег hr после каждых 4 div в следующем коде, по какой-то причине он не отображается правильно на скрипке.

http://jsfiddle.net/UHqWF/14/

Обновлено: http://jsfiddle.net/UHqWF/16/

<hr> 
<div class="imageitem"><div>Image Item</div></div> 
<div class="imageitem"><div>Image Item</div></div> 
<div class="imageitem"><div>Image Item</div></div> 
<div class="imageitem"><div>Image Item</div></div> 
    <hr> 
<div class="imageitem"><div>Image Item</div></div> 
<div class="imageitem"><div>Image Item</div></div> 
<div class="imageitem"><div>Image Item</div></div> 
<div class="imageitem"><div>Image Item</div></div> 
    <hr> 
<div class="imageitem"><div>Image Item</div></div> 
<div class="imageitem"><div>Image Item</div></div> 
<div class="imageitem"><div>Image Item</div></div> 
<div class="imageitem"><div>Image Item</div></div> 

Решение: Мой выше подход является утомительным & усложнит конструкцию с размерами экрана различно.

Я думаю, что лучше добавить border-top:1px solid red; в imageitem ДИВ

.imageitem { 
     -moz-box-sizing:border-box; 
    -webkit-box-sizing:border-box; 
      box-sizing:border-box; 
     float:left; 
     padding:10px; 
     width:100%; 
     border-top:1px solid red; 
     border-bottom:0px solid red; 
    } 

Answer 1

Это потому, что вы плавали свои элементы. Добавьте hr {clear: both;} правило css, чтобы исправить это.