Clearfix bei mehreren floatenden divs | Höhenabstandproblem

[Jörn Akkermann]

Hallo,

ich habe auf meiner Seite folgende Situation:

Links ein Navigations-div mit Hyperlinks, float: left;
rechts daneben einen main-content-div mit dem eigentlichen Inhalt der Seite;
in dem main-content div kommen manchmal zwei divs mit float: left und float: right vor (im Linken der Titel, im Rechten Buttons von Elementen einer Liste);
darunter ein Clearfix.

Jetzt ergibt sich das folgende Problem:
Der Abstand zwischen dem Clearfix und den beiden Float-Divs der Listenelemente ist so groß, dass der Inhalt nach dem Clearfix da beginnt wo das Navigations-div ganz links höhenmäßig aufhört.

Screenshot mit Kommentaren

Ohne das Clearfix gibt es das Problem nicht.

Code meines Clearfixes (allerdings entsteht das Problem bereits wenn das Clearfix lediglich aus clear: both; besteht):
.clearer:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

* + html .clearer {
    display: inline-block;
}

* html .clearer {
height: 1%;
}

Ich hoffe Sie können mir helfen!

Vielen Dank
und mit freundlichen Grüßen,
Jörn Akkermann.