Google chrome css problem

[vizz]

I have three column layout. It works fine in all browsers except Google Chrome.
There is unwanted space between Column 2 and Column 3. Sometimes 1px or sometimes 2px only in Google Chrome.

My CSS

<style type="text/css">
* {
	margin: 0px;
	padding: 0px;
}
body {
	border:none;
	background-color: white;
	text-align: center;
	margin: 0px;
	padding: 0px;
	
}
#header {
	background-color: #ffffcc;
	text-align:center;
}
#footer {
	background-color: #eeeeee;
	text-align:center;
 position:absolute;
   bottom:0;
   width:100%;
   height:60px;   /* Height of the footer */
   
}
div.clear {
	clear:both;
}
#wrapper {
	margin: 0 auto;
	width:100%;		
	background-repeat:repeat-y;
	background-position:center top;
	background:#669999;
}
#col1 {
	float: left;
	width:55%;
	height:600px;
	background:#3366FF;	
}
#col2 {
	float: left;
	width:30%;
	height:600px;
	background:#CC9900;		
}
#col3 {
	float: right;
	width:15%;
	height:600px;
	background:#3366CC;	
}
</style>

My HTML

<div id="wrapper">
	<div id="header">
		<h1>Header</h1>
	</div>

	<div class="clear" ></div>

	<div id="col1">
		<h4>column1</h4>
	</div>

	<div id="col2">
		<h4>column2</h4>
	</div>

	<div id="col3">
		<h4>column3</h4>
	</div>

	<div class="clear"></div>

	<div id="footer">
		<h4>Footer</h4>
	</div>

</div>