Applying border in grid structure in css - html

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

If you're trying to create something that is table-like, why not just use tables?
<table class="container">
<tr>
<td><h1>lorum ipsum lorum ipsum</h1><p>lorum ipsum epsum</p></td>
<td><h1>lorum ipsum</h1><p>lorum ipsum epsum</p></td>
<td><h1>lorum ipsum lorum ipsum</h1><p>lorum ipsum epsum</p></td>
<td><h1>lorum ipsum</h1><p>lorum ipsum epsum</p></td>
</tr>
<tr>
<td><h1>lorum ipsum lorum ipsum</h1><p>lorum ipsum epsum</p></td>
<td><h1>lorum ipsum</h1><p>lorum ipsum epsum</p></td>
<td><h1>lorum ipsum lorum ipsum</h1><p>lorum ipsum epsum</p></td>
<td><h1>lorum ipsum</h1><p>lorum ipsum epsum</p></td>
</tr>
</table>

Answer 2

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

Answer 3

The overflow:hidden on .RowContainer is hiding the border on the .Cell divs, because border is drawn outside the .Cell's box, which is set to 100% height. Removing the overflow:hidden should reveal it again.
As for the unequal border, I can't say for sure since you didn't provide a jsfiddle to look at, but I'm guessing you mean the borders between the cells is thicker than it should be -- that's because each .Cell has a border all the way around, resulting in the left/right borders sitting next to each other, giving the appearance of a 2px border.
You can fix this by only setting border on the top and left sides of each .Cell, and then setting border on the bottom and right sides of the .Container.

Answer 4

remove your overflow:hidden
like this
.Container {
width:1000px;
margin:0 auto;
}
.RowContainer {
height:200px;
clear:both;
}
.RowContainer .Cell {
position:relative;
float:left;
height:100%;
width:200px;
border:1px solid Black;
}
The CSS Overflow
Every single element on a page is a rectangular box. The sizing, positioning, and behavior of these boxes can all be controlled via CSS. By behavior, I mean how the box handles it when the content inside and around it changes. For example, if you don't set the height of a box, the height of that box will grow as large as it needs to be to accommodate the content. But what happens when you do set a specific height or width on a box, and the content inside cannot fit? That is where the CSS overflow property comes in, allowing you to specify how you would like that handled.
There are four values for the overflow property: visible (default), hidden, scroll, and auto. There are also sister properties overflow-y and overflow-x, which enjoy less widespread adoption.