CSS bug

The enclosed XHTML document shows up a CSS bug that I run into regularly  
with Amaya.

My theory is that "height: 100%" is not working for the divs.

It is I admit a gruesome document consisting of loads of nested divs. I  
apologise.  But there is method to the madness. The technique is this:

    <div class="hn"><p>2009</p></div><div class="h"> ... more stuff here  
...</div>

The idea is that these two divs will be put next to each other  
(h=horizontal, n=number)

	div.hn {height: 100%; width: 49%; float: left }
	div.h  {height: 100%; width: auto;}

"... more stuff here ..." contains two divs that will be placed above each  
other (v=vertical):

    <div class="vn"><p>2008</p></div> <div class="v"> ... yet more here ...  
</div>

    div.v  {height: 50%; width: 100%; }
    div.vn {height: 50%; width: 100%; }

The "yet more here" contains another two 'h' class divs, and so on ad  
nauseam.

An hn has additionally:
	 border-right: 2px blue solid;
and likewise a vn has:
	 border-bottom: 2px red solid;

Apart from that there is an all-encompassing div surrounding the lot  
(class="a") with a big black border.

As you will see in Amaya, the blue borders are too short, making me  
suspect the problem is with height. But maybe I shouldn't have said that  
lest it send you on a wild-goose chase.

The problem may be with my CSS, I admit. I call to my defense a number of  
mainstream browsers that do seem to do what I expect.

Thanks!

Best wishes,

Steven Pemberton