contact form in rounded corner box... need help please.

[moisea]

hello i m trying to add a contact form to my rounded corners box but it does not sit properly inside (the box). please see attached pic as i am working on my localhost.iit does seem to stay in box when i cancel the form's style sheet
here is the contact form style

/* CSS Document */
 
h1, h2 {
    margin: 0 0 10px 0;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    /*font-size: 140%;*/
    color: f8cd0f;
	text-align:center;
	text-decoration:underline
} 

p {
    margin: 0 auto 1em 0;
    padding: 0 20px;
    font-size: 85%;
    line-height: 1.4;
}

#form-wrap {
	width: 660px;/*660px*/
	background: white;
	padding: 20px 50px 20px 50px;
	margin: 20px auto;
	min-height: 500px;
	height: auto !important;
	height: 500px;
}

#form-area {
	width: 550px;/*600px*/
	margin-top: 25px;
	
}


#nameDiv {

width: 460px;
float: left;

}

#nameDiv input, #nameDiv textarea {
	padding: 5px;
	width: 420px;
	font-family: Verdana, sans-serif;
	font-size: 1.4em;
	margin: 0px 0px 10px 0px;
	border: 2px solid #ccc;
}

#emailsDivLeft1 {

width: 220px;
float: left;

}

#emailsDivLeft1 input, #emailsDivLeft1 textarea {
	padding: 5px;
	width: 200px;
	font-family: Verdana, sans-serif;
	font-size: 1.4em;
	margin: 0px 0px 10px 0px;
	border: 2px solid #ccc;
	
	
}


#phone {

width: 220px;
float: left;

}

#phone input, #phone textarea {
	padding: 5px;
	width: 200px;
	font-family: Verdana, sans-serif;
	font-size: 1.4em;
	margin: 0px 0px 10px 0px;
	border: 2px solid #ccc;
	
	
}


#commentsDiv {
clear: both;
float: left;
}

#commentsDiv input, #commentsDiv textarea {
	padding: 5px;
	width: 420px;
	font-family: Verdana, sans-serif;
	font-size: 1.4em;
	margin: 0px 0px 10px 0px;
	border: 2px solid #ccc;
	
}

#securityDiv {
clear: both;
float: left;
}




#buttonDiv {
float: right;
margin: 60px 0px 0px 20px;
}




#form-area textarea {
	height: 90px;
}

#form-area textarea:focus, #form-area input:focus {
	border: 2px solid #f8cd0f;
}

#form-area input.button {
	width: 200px;
	
}

.warning {
    font-weight: bold;
    color: #f8cd0f;
}

form h2 {
    color: #036;
    font-size: 80%;
    font-weight: bold;
    margin: 0 0 5px 10px;
}

label {
    font-weight: bold;
    color: #036;
    display: block;
	
}

and the round box style

/* set millions of background images */
						.rbroundbox2 { background:#434C51;}
						.rbtop2 div { background: url(images/tl2.gif) no-repeat top left; }
						.rbtop2 { background: url(images/tr2.gif) no-repeat top right; }
						.rbbot2 div { background: url(images/bl2.gif) no-repeat bottom left; }
						.rbbot2 { background: url(images/br2.gif) no-repeat bottom right; }
						
						/* height and width stuff, width not really nessisary. */
						.rbtop2 div, .rbtop2, .rbbot2 div, .rbbot2 {width: 100%;height: 7px;font-size: 1px;}
						.rbcontent2 { margin: 0 5px; }
						.rbroundbox2 {margin:  0.5em ; }

can someone please be kind enough to assist me on this ?
it been hours and i can't get anywhere.
many thanks.

[Erik J]

Whithout the targeted html it has to be a guess.

I guess the "#form-area" could need an "overflow:hidden" to wrap its content.

[moisea]

good guess Erik you were right , thank you very much.