Clear cleart nicht?

[Lupinius]

Salve

Ich habe probiert mehrere Blogeinträge per CSS nebeneinander anzuordnen. Der erste Eintrag wird groß alleine dargestellt, die anderen jeweils in Zweiergruppen untereinander. Darunter folgt eine Seitennavigation mit der Eigenschaft clear: both. Allerdings wird der Text auch neben den Einträgen angezeigt.

<div class="post">  
    <h2>Überschrift</h2>  
    Ganz viel Inhalt  
</div>  
<div class="post">  
    <h2>Überschrift</h2>  
    Ganz viel Inhalt  
</div>  
<div class="post">  
    <h2>Überschrift</h2>  
    Ganz viel Inhalt  
</div>  
<div class="post">  
    <h2>Überschrift</h2>  
    Ganz viel Inhalt  
</div>  
<span id="page">Seite <a href="#">1</a>, <a href="#">2</a>, <a href="#">3</a> [<a href="#">Zurück&lt;&lt;</a> <a href="#">&gt;&gt;Vor</a>]</span>

Dazu kommt folgender CSS-Code:

div.post {  
    padding: 1em 2.5%;  
}  
  
div.post + div.post{  
    float: left;  
    width: 45%;  
}  
  
span#page {  
    clear: both;  
    width: 100%;  
    text-align: center;  
}

Wo liegt der Fehler?