html css absolute layout-content coming below footer - html

Question

I am trying to create a simple page (Only using HTML and CSS) but I am having a difficulty with some elements.
main-nav and content is coming below the footer and tilda. Battling this for hours.
Please help !!!
html:
<div id="container">
<div id="header">
<div id="logo">
<a class="logo-image" href="/Common/vwWelcomeForm">Home</a>
</div>
<div id="version">
Version: <label for="Product_Version">AUSQUAD 1.5 SQL 1.5</label>
</div>
<div id="top-nav">
<label for="">24/10/2013 13:38:44</label> |
Home |
<label for="Administrator">Administrator</label> |
Log Out
</div>
<div id="header-title">
<h2>
Welcome to {<label for="Ausquad">Ausquad</label>}
</h2>
</div>
</div>
<div id="main-nav">
<div role="navigation" aria-label="Main menu">
<ul class="nav">
<li>Security Management
<ul>
<li>Company Setup</li>
<li>User List</li>
<li>Change Password</li>
<li>Module Permission</li>
<li>List Master</li>
<li>Master Groups</li>
<li>User Groups</li>
</ul>
</li>
<li>Message Administration
<ul>
<li>Message Type Master</li>
<li>Enquiry Source Master</li>
<li>Standard Message Master</li>
<li>Message</li>
<li>Message Log Management</li>
</ul>
</li>
</ul>
</div>
</div>
<div id="main-content">
test
</div>
<div id="tilda">
</div>
<div class="footer_left">
Copyright © 2013 Private Limited.
</div>
</div>
Css is:
#container{
width: 100%;
min-height: 100%;
position: relative;
overflow: hidden;
}
#header{
position: relative;
}
#logo{
padding: 0.625em 0 0 1.250em;
float:left;
}
/* converted px to em */
#version{
text-decoration: none;
color: #000000;
font-size: 0.750em;
position: absolute;
top: 4em;
left: 17em;
}
#logo a {
display:inline-block;
}
a.logo-image {
background: url('../images/logo-dashboard.png') no-repeat top left;
width: 147px;
height:76px;
text-indent: -9999px; /* hides the link text */
}
a.advertiser-logo-image {
background: url('../images/Evangelsoft_Logo_Orginal_1.jpg') no-repeat top left;
display: block;
width: 100px;
height: 63px;
text-indent: -9999px; /* hides the link text */
}
#top-nav{
position:absolute;
right:0.5em; /* rtl-review */
top:0.25em;
font-size:0.9em;
z-index: 1000;
}
#top-nav a {
text-decoration: none;
color: #039;
padding: 0.15em 0em 0.15em 0em;
}
#top-nav a:hover{
color: #017cc2;
}
#header-title{
width: 100%;
position: absolute;
top: 20px;
margin: 0 auto;
text-align:center;
}
#header-title h2{
font-size: 1.1em;
font-weight: 600;
border-bottom: 1px solid #cecfce;
color: #039;
margin: 1em 0em 0.5em 0.25em;
line-height: 1.2em;
}
#main-nav{
float: left;
margin-top: 1em;
width: 100%;
}
#main-content{
float: left;
width: 100%;
padding: 10px;
padding-bottom: 60px;
margin-top: 1em;
clear: left;
}
#tilda {
position: absolute;
bottom: 24px;
height: 36px;
width: 100%;
left: 0;
right:0;
}
.footer_left {
bottom: 0;
height: 24px;
margin: 2px 0 0;
position: absolute;
text-align: right;
width: 100%;
padding: 10px 0px 5px 0px;
color: #434343;
border-top:1px solid #ddd;
background: none repeat scroll 0 0 #E8E8E8;
}