Why does my DIV ovelay my text div when resized? - html

Question

Few problems. It looks great when it's not re-sized. But when it's re-sized everything plays up.
Main issue is the nav; when it's resized it overlays the main text and collides with it. Also how would I go about sorting out the layout when it's resized? I want the header to always look good regardless of size.
Thank-you.
HTML
<div class="wrapper">
<div class="header">
<div class="company-text"> Kidderminster Electronic Recycling</div>
<nav>
Contact
FAQ
Recycling
Where we collect
Home
</nav>
<div class="clear"></div>
</div>
<div class="main-content">dfgf</div>
<div class="footer">xxzxczxczxcz</div>
</div>
CSS
body, html {
margin: 0 0;
height: 100%;
}
#font-face {
font-family: TCB_____;
src: url('TCB_____.ttf');
}
.wrapper {
width: 100%;
height: 100%;
background-color: yellow;
}
.header {
width: 100%;
background: black;
height: 20%;
}
nav {
background-color: #222;
padding: 0;
padding-right: 5%;
width: 45%;
display: inline-block;
float: right;
position: relative;
top: 50%;
transform: translateY(-50%);
}
nav a { color: #F9F9F9; display: block; float:right; padding: 10px; }
nav a:visited { color: #f9f9f9; }
nav a:hover { text-decoration: none; background: #27B3CF; }
nav a:active { position: relative; top: 0; }
a {
outline: 0;
text-decoration: none;
font-family: TCB_____; /* no .ttf */
text-transform: uppercase;
letter-spacing: 0.3em;
font-size: 1.0037500100376em;
}
.clear {
clear: both;
}
.company-text {
font-family: TCB_____; /* no .ttf */
font-size: 1.5em;
padding-left: 5%;
letter-spacing: 0.3em;
color: white;
text-transform: uppercase;
float: left;
width: 45%;
position: relative;
top: 50%;
transform: translateY(-50%);
}
.main-content {
background:url('all-electronics-recycling-home.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
height: 75%;
}
.footer {
height: 5%;
background: black;
width: 100%;
outline: 0;
text-decoration: none;
font-family: TCB_____; /* no .ttf */
text-transform: uppercase;
letter-spacing: 0.3em;
font-size: 0.8em;
color:white;
text-align: center;
}
LIVE DEMO
http://jsfiddle.net/48ajumza/

Answer 1

The #nav element is floated. So, it does not have a height. In order to give it a height, you'll need to drop something in the bottom of it that will clear floats. I used one of your divs with the class .clear.
<div class="wrapper">
<div class="header">
<div class="company-text"> Kidderminster Electronic Recycling</div>
<nav>
Contact
FAQ
Recycling
Where we collect
Home
<div class="clear"></div>
</nav>
<div class="clear"></div>
</div>
<div class="main-content">dfgf</div>
<div class="footer">xxzxczxczxcz</div>
</div>