Hi all.. just spotted that in IE6 everything is pushing to the right, somethings adding more margin space on my <div id="l4">, everything works ok in IE 7 and FF??? Please help! Thanks in advance

CSS
Code:
#wrapper {width: 788px; margin: 0px auto;}

#l4 {float:left;width:209px;margin-left: 30px;margin-right: 10px; background-color:#BBB;}
#m4 {float:left; width:302px;margin-right: 10px;padding:5px; background-color:#CCC;}
#r4 {float:left;width:185px; height:auto; background-color:#EEE;}

/* CSS HACK's */
.clearfix:after {content:"."; display:block; height:0; clear:both; visibility:hidden;}
.clearfix {display:inline-block;}
/* mac hide \*/* html .clearfix {height: 1%;} .clearfix {display: block;}/* End hide */
HTML
HTML Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Example</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="structure.css" rel="stylesheet" type="text/css">
<link href="appearance.css" rel="stylesheet" type="text/css">
</head>

<body>
<div id="wrapper" class="clearfix">

<div id="l4">
	<h2>our weekly events</h2>
		<div class="left_event_info">
			<p>This Week</p>
		</div>
</div>

<div id="m4">
  <h2>FRIDAY 8TH FEBRUARY 2008</h2>
</div>

<div id="r4">
  	<h2>Site  News</h2>
  	<p>8th February  2008</p>
</div>

</div>
</body>
</html>
Any suggestions???