Float:left with % height - html

Question

I'm currently trying to do this.
This is the code I got so far,
Html
<a class="home" href="home.php">
<i id="icon" class="fa fa-home"></i>
<p id="tag">Home</p>
</a>
Css for .home
width: 25%;
height: 25%;
overflow: hidden;
float: left;
background: #ea7b7b;
color: #fff;
text-decoration: none;
And the height:25%; does not work. I found some fixes like adding position:absolute;
but that messes up everything when resizing. I'm trying to find a work around to this and help would be much appreciated!

Answer 1

Try putting the elements inside a container div with an explicit height.
<div class="header"></div>
<div class="container">
<a class="home" href="home.php">
<i id="icon" class="fa fa-home"></i>
<p id="tag">Home</p>
</a>
<a class="contact" href="contact.php">
<i id="icon" class="fa fa-home"></i>
<p id="tag">Contact</p>
</a>
</div>
<div class="footer"></div>
CSS
.header, .footer
{
height: 50px;
background: black;
}
.home
{
background: #ea7b7b;
}
.container > a
{
width: 25%;
height: 50%;
overflow: hidden;
float: left;
color: #fff;
text-decoration: none;
}
.container
{
height: 600px;
width: 100%;
}

Answer 2

Sorry I'm a bit late but I made this FIDDLE
Hope it can help you, here is the code:
HTML:
<div id="top"></div>
<div id="content">
<div class="box">
<a class="home" href="home.php">
<i id="icon" class="fa fa-home"></i>
<p id="tag">Home</p>
</a>
</div>
<div class="box"></div>
...
</div>
<div id="bottom"></div>
CSS :
html, body {
width:100%;
height:100%;
margin:0;
padding:0;
}
#top, #bottom {
position:absolute;
height:80px;
width:100%;
background:grey;
left:0;
}
#top {
top:0;
}
#bottom {
bottom:0;
}
#content {
position:absolute;
top:80px;
left:0;
right:0;
bottom:80px;
}
.box {
box-sizing:border-box;
border:1px solid red;
float:left;
width:25%;
height:50%;
}
.home {
width:100%;
height:100%;
margin:0;
padding:0;
overflow: hidden;
float: left;
background: #ea7b7b;
color: #fff;
text-decoration: none;
}