I want to know why the navigation div is not occupying 100% height

I want to know why the navigation div is not occupying 100% height

I have a sample page as shown below
HTML code:
<div class="container">
<div class="header floatL width100p">
<h2>
Header
</h2>
</div>
<div class="content floatL width100p">
<div class="floatL width29p npv">
<p>navigation div</p>
</div>
<div class="floatL width70p rtb">
<div class="floatL width100p ql">
<p>
div one
</p>
<p>Lorem Ipsum is simply dummy text of the
printing and typesetting industry. Lorem Ipsum has
been the industry's standard dummy text ever since the
1500s
</p>
</div>
<div class="floatL width100p mtbs">
<p>
div two
</p>
<p>
Lorem Ipsum is simply dummy text of the printing
and typesetting industry. Lorem Ipsum has been the
industry's standard dummy text ever since the
1500s
</p>
</div>
<div class="floatL width100p widdiv">
<div class="floatL width100p">
<div class="floatL width40p incont">
<p>
Lorem Ipsum is simply dummy text of the
printing and typesetting industry. Lorem Ipsum
has been the industry's standard dummy
text ever since the 1500s
</p>
<p>
Lorem Ipsum is simply dummy text of the
printing and typesetting industry. Lorem Ipsum
has been the industry's standard dummy
text ever since the 1500s
</p>
<p>
Lorem Ipsum is simply dummy text of the
printing and typesetting industry. Lorem Ipsum
has been the industry's standard dummy
text ever since the 1500s
</p>
<p>
Lorem Ipsum is simply dummy text of the
printing and typesetting industry. Lorem Ipsum
has been the industry's standard dummy
text ever since the 1500s
</p>
</div>
<div class="floatL width40p incont">
<p>
Lorem Ipsum is simply dummy text of the
printing and typesetting industry. Lorem Ipsum
has been the industry's standard dummy
text ever since the 1500s
</p>
</div>
</div>
<div class="floatL width100p">
<div class="floatL width40p incont">
<p>
Lorem Ipsum is simply dummy text of the
printing and typesetting industry. Lorem Ipsum
has been the industry's standard dummy
text ever since the 1500s
</p>
<p>
Lorem Ipsum is simply dummy text of the
printing and typesetting industry. Lorem Ipsum
has been the industry's standard dummy
text ever since the 1500s
</p>
<p>
Lorem Ipsum is simply dummy text of the
printing and typesetting industry. Lorem Ipsum
has been the industry's standard dummy
text ever since the 1500s
</p>
<p>
Lorem Ipsum is simply dummy text of the
printing and typesetting industry. Lorem Ipsum
has been the industry's standard dummy
text ever since the 1500s
</p>
</div>
<div class="floatL width40p incont">
<p>
Lorem Ipsum is simply dummy text of the
printing and typesetting industry. Lorem Ipsum
has been the industry's standard dummy
text ever since the 1500s
</p>
</div>
</div>
</div>
</div>
<div class="clear"></div>
</div>
<div class="footer floatL width100p">
<h2>
Footer
</h2>
</div>
<div class="clear"></div>
</div>
The styles are:
*,html{
margin: 0;
padding: 0;
}
.container{
width:960px;
margin:20px auto;
}
.header h2,.footer h2{
text-align: center;
}
.floatL{
float: left;
}
.floatR{
float: right;
}
.clear{
clear:both;
}
.width100p{
width: 100%;
}
.width29p{
width: 29%;
}
.width70p{
width: 70.8%;
}
.header,.footer,.content{
border:1px solid;
}
.npv{
border-right: 1px solid;
height: 100%;
}
.ql,.mtbs{
border-bottom: 1px solid;
}
.width40p{
width: 40%;
}
.incont{
margin: 4%;
background: #ccc;
border:1px solid red;
}
I would like to know why the left navigation div is not occupying 100%
height as you can see by running the above code.
Any help would be appreciated. It is urgent...