gap between two divs (driving me crazy)

[jace41]

Can't find a solution to close the gap between navs div and main_BODY div. I use the float for dts to act as the nav and clear the float after, but it seems caused a gap. The dl and dt is new concept to me and dunno if they are the factor for the gap, any suggestion?

css:

body {
	margin: 0;
	padding: 0;
	color: #333;
	background-color: #FFFFFF;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
}

div#container {
	margin: 0 auto;
	width: 770px;
}

/* nav contents */
div#navWRAPPER {
	background-color: #E7EBF0;
	padding: 10px 5px 0 7px;
	border: 1px #000 solid;
}

div#navWRAPPER dt {
	float: left;
	border-left: 1px #000 solid;
	border-top: 1px #000 solid;
}

dt#right_borderNAV {
	border-right: 1px #000 solid;
}

head+body #navWRAPPER:after {
	content: "."; 
	display: block; 
	height:0; 
	clear: both; 
	visibility: hidden;
}

* html #navWRAPPER {height: 1%;}

.nav_page a {
	color: #FFFFFF;
	font-weight: bold;
	background-color: #6E9DE1;
}

.nav_page:hover {
}

.nav a {
	color: #000;
}

#navs a {
	float: left;
	text-decoration: none;
	font-weight: bold;
	text-transform: uppercase;
	display: block;
	padding: 2px 10px 4px 10px;
}

#navs a:hover {
	background-color: #6E9DE1;
	color: #FFFFFF;
}

* html #navs a {height:1%}
/* end of nav contents */

/* body contents */
div#search_exp {
	border-left: 1px #000 solid;
	border-bottom: 1px #000 solid;
	border-right: 1px #000 solid;
}

div#search_exp h3 {
	color: #000;
}

html:

<div id="container">
<div id="navWRAPPER">
		<dl id="navs" class="navs">
			<dt class="nav_page"><a href="#">test1</a></dt>
			<dt class="nav"><a href="#">test2</a></dt>
			<dt class="nav"><a href="#">test3</a></dt>
			<dt class="nav"><a href="#">test4</a></dt>
			<dt id="right_borderNAV" class="nav"><a href="#">Sign In</a></dt>
		</dl>
	</div>
	<div id="main_BODY">
		<div id="search_exp"><h3>test test test test test test</h3><p>blah blah blah blah</p>
		<p>blah blah blah blah blah</p>
		</div>
		</div>
		</div>

Thanks!

Jace

[all4nerds]

Hello

set default margins and paddings to 0, then adjust

*{margin:0;padding:0;}
h3{padding:10em 1em 1em 1em;}