Question

I am trying to create a grid struture with div of equal height and width but I am unable to apply the border
CSS

 .Container {
    width:1000px;
    position:relative;
    margin:0 auto;
}
.RowContainer {
    overflow:hidden;
    position:relative;
    height:200px;
    clear:both;
}
.RowContainer .Cell {
    position:relative;
    float:left;
    height:100%;
    width:200px;
    border:1px solid Black;


}

HTML

    <div class="Container">     
    <div class="RowContainer">
      <div class="Cell"><h1>lorum ipsum lorum ipsum</h1><p>lorum ipsum epsum</p> </div>
        <div class="Cell"><h1>lorum ipsum</h1><p>lorum ipsum epsum</p></div>
        <div class="Cell"><h1>lorum ipsum lorum ipsum</h1><p>lorum ipsum epsum
        </p>  </div>
        <div class="Cell"><h1>lorum ipsum</h1><p>lorum ipsum epsum</p></div>
    </div>
    <div class="RowContainer">
        <div class="Cell"><h1>lorum ipsum lorum ipsum</h1><p>lorum ipsum epsum
        </p></div>
        <div class="Cell"><h1>lorum ipsum</h1><p>lorum ipsum epsum</p></div>
        <div class="Cell"><h1>lorum ipsum</h1><p>lorum ipsum epsum</p></div>
        <div class="Cell"><h1>lorum ipsum</h1><p>lorum ipsum epsum</p></div>
    </div>  
    <div style="clear:both"></div>    
</div>

I have two issues

1.
border is not showing in the last row.

2.
As well as the border width seems unequal despite of applying same border property to all.

Answer 1

Bottom border is not showing in either row because you have height: 100% on the .Cell and overflow: hidden on the .Container. What you are seeing under the first row is the top border for the second row.

If you set height: 100%; on the child of an element of height: 200px that has overflow: hidden and then you set a border of 1px to that child, then that border adds up on all sides.

It makes that child element take up 202px vertically. That’s 1px from top border + 200px from height + 1px from bottom border.

But the parent element has a height of only 200px and overflow: hidden, which means that vertically, from the child element, what you see is the 1px top border and 199px of the child’s height. There is still 1px of its height and the 1px bottom border which are hidden.

Second vertical border is thicker than the first, because you have there both the right 1px border of the first cell and the left 1px border of the second cell.

This would solve the issue http://dabblet.com/gist/3145644