how can I manage the 2 interactive

[Yogi39]

how can I manage the 2 interactive Divs on this page. When the user hovers over the question the answer appears under the heading. I cant get this to align both in NS and IE.

http://www.geocities.com/jflyogi/qa.html

CSS style.css:

body { 	background:rgb(0,0,0) url('images/pierre.jpg') no-repeat fixed left bottom; color: black
	 }

A.a2:Link {color: #000000;
font-family: verdana;
font-size:10px;
font-weight:bold;
text-decoration: none
text-align:right
}
A.a2:Active {color:red;
font-family: verdana;
text-decoration: none;
}

A.a2:Visited {color:black;
font-family: verdana;
text-decoration: none
}

A.a2:Hover {cursor:help;
color: #F0F8FF;
font-family: Verdana;
font-size:130%;
font-weight: bold;
font-style: italic;
text-decoration: none
}


h1.title  {	font-family: Verdana;
		font-size:xx-large;
		text-align: center 
}

.menu {text-align: center;
	background-image: url('images/blue.gif');
	border: thin solid;
	border-color: #484848;
	font-weight: bold; 
	font-family:verdana }

.menu a	{color: #484848;
		font-family: verdana;
		font-size:12px;
	 	background-color: inherit }

.menu a:hover {	color: F0F8FF ;
		background-color: rgb(65,105,225);
		font-weight: bold;
		font-style: italic;
		        }


.menu strong {	font-size: large }

.other {font-family: verdana;
    font-size:12px;
    text-align: center;
	background-image: url('images/orangefilter.gif');
	border: thin solid;
	border-color: #484848;
	background-color: inherit;
	color: black;
	font-weight: bold }

.contentText {color: black;
		background-color:rgb(65,105,225);
		border: thin solid;
		border-color: #0000ff;
		font-family: verdana;
		text-align: justify;}

.footer	{ background-color: inherit;
	  color: rgb(102,102,198) }

.ahem {	display: none;	}

.content{font-family: verdana;
		text-align:justify;
		border: thin solid;
	border-color: #484848;
	background-color:#F0F8FF;
		cursor : help;
}


h2 { font-family: verdana;
font-size:10px;
	 text-align:right }

CSS screenlayout.css:

.title	{ margin-top : 0.5em;
	  width : 98%;
	  margin-left : auto;
	  margin-right: auto;
	  padding: 5px;
	  z-index : 0; }

.sidebar{ position : absolute;
	  top : 13em;
	  left : 1%;
	  width : 10em;
	  z-index : 1;
	  padding : 0em; }
.menu{ 	padding : 0.5em;
	margin-bottom : 0.5em; }

.menu a {display : block;}
.menu .delimiter {display : none;}

.other{	padding :0.5em;
	margin-top : 0.5em; }

.contentText {	margin-left : 12em;
		padding : 1em;
		margin-right : 1em; }

.ahem {display : none}

.content{margin-left :12em;
		padding : 1em;
		margin-right : 1em;
        visibility: hidden;
        position: absolute;
        top:300px;
        		}