CODEWITHSUNDEEP
htmlcss
Learning
Learning

Reputation: 20001

HR tag not showing up a right place

I am trying to add hr tag after every 4 div in the following code, for some reason it doesn't show at correctly on fiddle.

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

Updated: 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>

Solution: My above approach is tedious & will complicate design with differnt screen sizes.

I think it is better to add border-top:1px solid red; to imageitem div

.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;
    }

Upvotes: 1

Views: 1457

Answers (1)

Justinas
Justinas

Reputation: 43441

It's because you have floated your elements. Add hr {clear: both;} css rule to fix it.

Upvotes: 6

Related Questions