[thelist] aligning boxes flush

[sten]

Hi,

I'm trying to align to div's so that the bottom of one is flush the th top
of the other. ASCII art example:
       ___________
       | box1    |
-------          |
|     box2       |
------------------

I've been trying to use absolute positioning and percentages to lign the
boxes up:

#box1 {
	position: absolute;
	top: 15%;
	left: 56%;
	height: 5%;
	width: 12%;
	border: 1px solid #ffffff;
	color: #ffffff;
	text-align: center;
	background-color: #000000;
	font-size: 12pt;
	z-index: 1;
}
#box2 {
	position: absolute;
	top: 20%;
	left: 3%;
	min-height: 70%;
	width: 65%;
	border: 1px solid #ffffff;
	background-color: #000000;
	overflow: hidden;
}

This works in Mozilla, but not in IE. Also, text, especially if I change
the font size in the boxes, seems to throw the alignment off.

There's gotta be a better way to do this. Suggestions?

-sten