dove sbaglio ? su IE 7 si vede correttamente, su FF 3 no

IE 7



FF 3



questo il codice (ridotto all'osso)

codice:
<html>
<head>
<style type="text/css">
<!--
#layout {
	width: 800px;
}
#colonna1 {
	margin: 0px;
	padding: 0px;
	float: left;
	width: 500px;
}
#colonna2 {
	padding: 0px;
	width: 240px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 560px;
}
h2 {
	clear: both;
}
-->
</style>
</head>
<body>
<div id="layout">
  <h1>bla bla bla</h1>
  <div id="colonna1"> n sjnfd  n sj..... dpmdpmpgmp </div>
  <div id="colonna2">
    

 n sjnfd...... dpmdpmpgmp </p>
    <h2>bla bla bla</h2>
    

 n s......mpgmp </p>
  </div>
</div>
</body>
</html>
Come mai in firefox il clear di h2 della colonan2 ha effetto sulla colonna 1 ?

Vorrei chiaramente che anche in FF si vedesse come in IE 7, dove sbaglio ?