[CSS] DIVs anordnen

[MathiasSimmack]

Ich arbeite gerade an einem eigenen kleinen Mobiltheme für meinen Blog. Ja, ich weiß, dass es so was schon gibt, ich will halt selbst ... Ein Kumpel hat mit seinem Symbian-Handy einen Screenshot gemacht (s. Anhang). Wie man sehen kann ist der Titel leicht mittig versetzt.

Das liegt an der Navigation, die aus drei DIV besteht (dem Container, sowie einem linken und einem rechten, die sich jeweils 50% der Breite teilen). So sieht der Code der Seite grundlegend aus:

Code:

<div id="page">
  <div id="content">
    <div class="navigation">
      <div class="left">Alter Beitrag</div>
      <div class="right">Neuer Beitrag</div>
    </div>

    <div class="post">
      
    </div>
  </div>
</div>


/* hier gleich mal der CSS-Code aus der Stylesheet-Datei */

#page
{
   text-align: left;
   background: white;
   margin: 0 auto;
   position: relative;
   border: 1px solid #ddd;
   border-top: none;
   clear: both;
}

#content
{
   text-align: justify;
   padding: 3px;
}

.navigation .alignleft
{
   float: left;
   text-align: left;
   width: 50%;
   font-size: smaller;
}

.navigation .alignright
{
   float: right;
   text-align: right;
   width: 50%;
   font-size: smaller;
}

Irgendwo hier liegt jetzt mein Denkfehler. Ich möchte den navigation-DIV dazu zwingen, die Höhe des größten Beitragstitels (im Bild links "Web 2.0 vs Politiker 0.0") anzunehmen, damit der eigentliche Beitrag (post-DIV) und sein Titel wieder links angeordnet sind.
Im Moment ist es so, dass der Titel verschoben ist, weil der rechte Titel kurz ist und nur eine Zeile belegt, und damit Platz zur Verfügung steht.

Kann mir jemand auf die Sprünge helfen?

[S2B]

So sollte es gehen:

Code:

div.post {
  clear: both
}

Du kannst dir übrigens bei deinem Code auch ein float sparen:

Code:

<div style="float: left">links</div>
<div style="text-align: right">rechts</div>

[MathiasSimmack]

Herzlichen Dank.