How to stop Div losing left margin in IE7 when 'clear:both' div is added

I have hit a really annoying problem that manifests in IE only.

Essentially, the problem is:

container div containing many post
post div that holds text and floated image, and has a margin to center it within the container
a 'clear:both' div that is meant to clear the floated image, so that it always sits within the post div (otherwise it extends below it if the image is larger than the text

In FF it works fine.  In IE7, when the clear div is added at the bottom of the post div (i.e. where it needs to be) then the post div loses it's left margin.  

Strangely, the clear:both div can be added higher up in the post div without it losing it's margin?

Preview is here: http://experience5elements.com/intranet/

(See bottom post for the problem - the 'clear:both' div has a black border (the 2px by 10px box) for visibility)

Any ideas what's going on, and how to fix it?

Problem div HTML:
 
<div class="wall_post">
<div class="right">by Person D, 6th October</div>
<h2>Wall post with image</h2>
 
 
<p><a href="zensand.jpg"><img src="zensand.jpg" class="wall_image" align="right" /></a>Lorem ipsum dolor sit amet, est aliquam sagittis, volutpat enim rhoncus enim phasellus. Donec sem arcu fringilla ultricies, dolor id eros fames arcu, cras diam mollis, suscipit amet mauris morbi sem quisque. Enim lacus adipiscing eu. Erat eu congue tempus et tortor, euismod convallis lorem enim et scelerisque tristique, tristique justo donec ligula ut ut lacus, massa turpis aliquam sed donec malesuada semper, quis vitae wisi. Velit duis, nulla risus luctus varius sit, sapien lectus vel ultrices, nec adipiscing rhoncus sociis curae risus. Pulvinar mus mauris cras ut fringilla. Vitae lectus a, viverra vestibulum a nec pede vitae, tortor porttitor in placerat mauris nulla, ipsum aliquam, porta nulla volutpat nisl.</p>
 
<p><a href="#">Add a comment</a></p>
<div class="clear">&nbsp;</div>
</div>
 
 
Relevant CSS:
 
.wall_image {
width: 200px;
height: 200px;
padding: 25px;
border: 1px solid #ddd;
margin: 0 15px 15px 15px;
background: #fff;
}
 
.wall_post {
border: 1px #ddd solid;
background: #f0f0f0;
padding: 15px;
margin-left: 15px;
margin-right: 15px;
}
 
.clear {
clear:both; 
height: 2px; 
width: 10px;
border:1px solid #000;
}

Select allOpen in new window