CSS - Elegant <td> Overflow

My CSS works in IE and Mozilla but not Netscape or Opera
I have a 2 column website, built with 2 relative position DIVs, with overflow set to auto. Because of this, I turned off overflow on the body tag and on the html tag (overflow: hidden;). I didn't want to have 2 scroll bars on the right side of the window. When I first tested this on 4 browsers, IE, Mozilla, Netscape and Opera, it worked great, only having one scroll bar on the right side of the window when the page was longer than the window height. But when I moved to a new host server recently, I discovered that Netscape and Opera stopped working. They now simply give me blank screens. When I remove the "overflow: hidden;" specifications from the body tag and the HTML tag in my CSS file, Netscape and Opera once again display my web pages. However, now I get 2 scrollbars on the right side of all 4 browsers (in IE, the second scrollbar isn't actually there, but the space holder for the scrollbar is there).

Is there a cross browser way for doing what I'm trying to do? Or am I faced with detecting the browser type on the server-side, and setting the style sheet appropriately?

Here are the related parts of my CSS:

/* CSS styles */
BODY {
font-family : Verdana, Arial, Helvetica, sans-serif ;
font-size : 10pt;
background : Black;
color : White;
margin: 0;
padding: 0;
border-width: 0;
overflow: hidden;
}


HTML {
overflow: hidden;
}


#LeftNavDIV {
position:relative;
width:185px;
height:100%;
float:left;
padding:2px 0px 0px 0px;
margin:0px 0px 0px 0px;
border:1px solid white;
overflow:auto;
}


#ContentDIV {
position:relative;
height:100%;
width:75%;
float:right;
padding:0px 0px 0px 0px;
margin:0px 0px 0px 0px;
border:0px dashed #336699;
overflow:auto;
}

this is the code i'm having problems with:

Code:

<style type="text/css">

body {
	font: normal 10px Verdana, Arial, Helvetica, sans-serif;
	color:#666;
 	margin : 0;
	padding : 0;
}

/* text */

h1 {
	font: bold 10px Verdana, Arial, Helvetica, sans-serif;
	line-height:30px;
}

/* div classes */

div.row {
	position:relative;
	left:10px;
	width:326px;
	height:20px;
	z-index:1;
	margin-bottom:8px;
	text-align:right;
}

div.cell_title, div.cell_content {
	position:absolute;
	top:0px;
	float:left;
	padding:0px 0px 0px 8px;
	border:1px solid #E4E4E4;
	text-align:left;
	line-height:17px;
	
}

div.cell_title {
 	background-color: #E4E4E4;
	left:0px;
	width:100px;
	z-index:2;
}

div.cell_content {
	background-color:#FCFCFC;
	left:100px;
	width:224px;
	z-index:3;

}

/* form elements */

.input {
	font: normal 10px Verdana, Arial, Helvetica, sans-serif;
	color:#666;
	background-color: #FCFCFC;
	height:15px;
	width:213px;
	border:0;
	}

.textarea {
	font: normal 10px Verdana, Arial, Helvetica, sans-serif;
	color:#666;
	background-color: #FCFCFC;
	height:100px;
	width:213px;
	border:0;
	overflow:auto;
	}

</style>

<h1>Contact</h1>
<form action="?menu=contact" method="post" name="contact">
<div class="row">
	<div class="cell_title"><label for="name">name:</label></div>
	<div class="cell_content"><input type="text" class="input" name="name" id="name"/></div>
</div>

<div class="row">
	<div class="cell_title"><label for="email">email:</label></div>
	<div class="cell_content"><input type="text" class="input" name="email" id="email" /></div>
</div>

<div class="row">
	<div class="cell_title"><label for="message">message:</label></div>
	<div class="cell_content"><textarea class="textarea" name="message" id="message"></textarea></div>
</div>

<div class="row">
	<input type="image" src="includes/images/btn_add.gif" name="Submit" value="Submit">
</div>
</form>

My problem is that my "row" div's overlay if their content is larger. Because of that i cannot see the send button from my form (the textarea height is bigger that the height of the "row" div - i need the layer to expland according to the content, but i don't want it to overlay on what is after it!).
I hope that you understood my problem and could help my with it.

Thanks in advance!

hi,

I have 3 DIV's, The first div is like a menu header DIV and the

second DIV is the menu links and the third DIV has some information

I want to click on the first DIV then show the second DIV like a

menu problem is the third DIV moves down.. How can i let the

second DIV overflow over the third DIV without it moving down?

Thanks

While working on my site, I am testing it in Mozilla Firefox 1.0pr and IE 6. In my code:

body, td, iframe, table, div, tr {
font-variant: small-caps;
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #ffffff;
background-color: #666666;
scrollbar-3dlight-color: #666666;
scrollbar-arrow-color: #666666;
scrollbar-base-color: #666666;
scrollbar-darkshadow-color: #666666;
scrollbar-face-color: #666666;
scrollbar-highlight-color: #666666;
scrollbar-shadow-color: #666666;
}
a:link {
color: #ffffff;
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #ffffff;
}
a:hover {
text-decoration: none;
color: #ff0000;
}
a:active {
text-decoration: none;
color: #ffffff;
}
select, option, textarea, input {
border: #ffffff 1px solid;
font-size: 11px;
font-variation: normal;
font-family: Verdana;
background-color: #666666;
}

I would add "overflow: auto;" right under 'body, td, iframe, table, div, tr {' so that in Mozilla the scrollbars would not show up. However, when I load it in IE, the windows do not scroll at all. Is there a quick-fix for this, or what can I do so it will work properly in both browsers?