Divs nebeneinander im IE und FF

[Andreas]

Hi,
habe folgendes Template:

function view_body($content, $blocks) {
return <<<EOF

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

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. Im FF dagegen werden die beiden divs untereinander angezeigt.

Hab ich ein Fehler gemacht, etwas vergessen oder wie kann ich es anstellen dass im FF die divs untereinander sind?

Gruß Andreas

[Detlef G.]

Hallo Andreas

function view_body($content, $blocks) {
return <<<EOF

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

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

Es handelt sich also um ein Anzeigeproblem, dann poste bitte das, was beim
Browser ankommt und nicht die PHP-Quelle.
Noch besser wäre ein Link auf eine Seite, die durch diese Funktion generiert
wird.

Auf Wiederlesen
Detlef

[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

[Andreas]

Hallo,
so alle paar Monate probiere ich als per css ein Tabellenlayout abzulösen. Jedesmal gib ich dann auch auf weil die Anzeige beider Browser unterschiedlich ist.
Eigentlich hatte ich diesmal auch wieder aufgegeben, aber ich probiere es mal mit deinen Tipps.

Dass der rechte Frame wie der linke linksbündig ist habe ich bemerkt, aber wohl die falschen Schlüsse daraus gezogen.

Gruß Andreas

[Axel Richter]

Hallo,

so alle paar Monate probiere ich als per css ein Tabellenlayout abzulösen.

Das geht nicht, wenn ablösen für Dich 1:1 identisches Aussehen bedeutet. Ein "Tabellenlayout" kann nicht durch ein HTML-Dokument ohne Tabellenkonstrukt 1:1 nachgebildet werden, weil IE das (display:table...) eben noch nicht kann.

Dass der rechte Frame wie der linke linksbündig ist habe ich bemerkt, aber wohl die falschen Schlüsse daraus gezogen.

Frame? Das geht schon gar nicht ;-).

viele Grüße

Axel