Divs nebeneinander im IE und FF

[Axel Richter]

Hallo,

habe folgendes Template:

<div class="block">
    <h1>Titelzeile</h1>
    <div class="lblock">
   {$content}
    </div>
    <div class="rblock">
   {$blocks}
    </div>
  </div>

und folgende CSS Klassen:

.block {
    text-align: left;
    margin: 0 auto;
    width: 760px;
    border: 1px ridge silver;
    background-color: #fcfcfc;
}

.lblock {
text-align: justify;
background-color: #fcfcfc;
float: left; width: 500px;
border: 1px ridge silver;
}

.rblock {
text-align: justify;
background-color: #fcfcfc;
border: 1px ridge silver;
width: 150px;
}

Im IE wird alles ok, die beiden divs werden nebeneinander angezeigt.

Nein, nicht OK, wenn auch so, wie Du es willst.

Im FF dagegen werden die beiden divs untereinander angezeigt.

Ja, das ist korrekt so. Das float:left für DIV.lblock sagt, dass Inhalt in Inline-Boxen um das DIV fließen soll. Du sperrst diesen Inhalt von DIV.rblock aber in einer Breite von 150px ein. Wie soll er nun das 502px breite DIV.lblock umfließen?

Mach mal den Hintergrund von DIV.lblock transparent und gib DIV.rblock eine sichtbare Hintergrundfarbe. Dann siehst Du, wo DIV.rblock im FF anfängt.

Möglichkeit 1: DIV.rblock erhält keine Breitenangabe, dann fließen dessen Inline-Boxen um das DIV.lblock.

Möglichkeit 2: DIV.rblock erhält die Breite 150px und ein margin-left von mindestens 502px.

viele Grüße

Axel