[css]Przesunięty div w IE

Witam
Mam następujący kod:

<div class="container">
<div class="main">        
<div class="content">Tresc</div>
<div class="leftcolumn">Lewa kolumna</div>
<div class="clearer">&nbsp;</div>
</div>
</div>

Kod CSS:

.container {
    border: 1px solid black;
    background: #FFF;
    font-size: 1.2em;
    margin: 0 auto;
    width: 860px;    
}

.main {
    background: #FFF;
    border: 1px solid black;
    width:858px;
    margin:0 auto;        
}

.content {
    background: #FFF;
    float: right;
    width: 600px;
    border:1px solid black;
}

.leftcolumn{
width:244px;
float:left;
border:1px solid black;
}

.clearer {clear: both; font-size: 0;}

Dla Firefoxa oraz Opery strona prezentuje się następująco:

http://img122.imageshack.us/my.php?image=firefoxgr5.jpg

natomiast dla IE:

http://img220.imageshack.us/my.php?image=ieol9.jpg

W jaki sposób można w IE zlikwidować tę wolną przestrzeń pomiędzy divem zawierającym treść, a dolną krawędzią? Problem najprawdopodobniej spowodował clear:both, niestety nigdzie nie znalazłem rozwiązania.

Będę wdzięczny za pomoc i z góry dziękuję.

Pozdrawiam
Łukasz

.clearer { clear: both; font-size: 0; height: 0; line-height: 0 }</code>

Dzięki, pomogło.

Pozdrawiam

a nie prościej usunąć to & nbsp;?