I have a 2 col layout floating. There's a gap between my img element within these columns. I've try putting a "<div class="clearer"></div> before the wrapper end but it's not clearing. Is that even the correct method to get the element back into flow?

HTML Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
		"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>2 col</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" media="screen" href="eaInt.css" />
</head>
<body>
<div id="container"> 
  <div id="content"> 
<div id="right">
<img src="/images/subtop.gif" />
<img src="/images/small_logo.gif" alt="globe1" />
<img src="/images/globe2.gif" alt="globe" />
</div>
<div id="left">
<h2 class="title">title</h2>
    <img src="/images/sub_text.gif" alt="text" />
</div>
   <div class="clearer"></div>
  </div>
  <div id="footer"> 
  <p>&copy;copyright</p>
  </div>
</div>
</body>
</html>
Code:
body {
	margin: 30px 10px 10px 10px;
	padding: 0;
	background:#999;
	text-align:center;/* center layout in ie5 and 5.5. */
	font-family: bold verdana , helvetica, sans-serif;
	font-size: 11px;
	color: #666;
}
#container {
	width: 723px;
	margin: 0px;
	margin-left: auto;
	margin-right: auto;
	background-color: #fff;/* this is the background colour of the right column */
	text-align:left;
}
#content {
	border: 1px solid #666;
}
* html #content {height:1%}
#left {
	width:393px;
	float:left;
}
.rightwrapper {background: #eee url(/images/ridge.gif) top right repeat-y; text-align:right;}
#right {
	width:328px;
	float:left;
}

#footer {
	height: 15px;
	background: #999;
	color: #fff;
	font-weight: bold;
}
#footer p {margin: 0; padding: 5px 0 0;} 
.clearer {
 clear:both;
 height:1px;
 overflow:hidden;
 margin-top:-1px;
}