zwei Div gleich groß bei variablem Inhalt

[goldguysaffe]

Hallo,

ich habe folgendes Problem:

Ich habe zwei Div's nebeneinander. Das erste wird mit float:left ausgerichtet. Im Ersten befindet sich eine Grafik und im Zweiten der beschreibende Text. Nun ist das Text-Div meistens Größe und obwohl ich Div's verwendet und bei per height:100% an einem Übergeordneten Div mit ebenfalls height:100% ausrichte, wird der Text eingerückt sobald er übers Bild hinausragt.

Das Problem tritt beim Mozilla Firefox und warscheinlich noch bei einigen anderen auf. Beim aktuellen IE nicht.

Auf folgender Seite tritt das Problem auf:
http://www.goldguysaffen.de/games/systeme/systeme_faq.php

...hier ist der Quellkode:
view-source:http://www.goldguysaffen.de/games/systeme/systeme_faq.php

Ich hoffe Ihr könnt mir helfen

Grüße,
Andre

[Marc Reichelt]

Hi!

Ich habe zwei Div's nebeneinander. Das erste wird mit float:left ausgerichtet. Im Ersten befindet sich eine Grafik und im Zweiten der beschreibende Text. Nun ist das Text-Div meistens Größe und obwohl ich Div's verwendet und bei per height:100% an einem Übergeordneten Div mit ebenfalls height:100% ausrichte, wird der Text eingerückt sobald er übers Bild hinausragt.

Das linke Div floated nach links, ist also per Definition nicht größer als das Bild selbst.
Die Anweisung height:100% bedeutet, dass das div 100% der Höhe des übergeordneten Elements haben soll - willst du das wirklich??? ;-)
Versuch's mal damit beide div's als inline-Objekte zu definieren:
diplay:inline;

Damit erzeugen sie keinen Zeilenumbruch mehr (ergo musst du das float:left dann weglassen).

Probieren geht über studieren...

cu

Marc Reichelt || http://www.marcreichelt.de/

[Ingo Turski]

Hi,

ohne jetzt in Deinen Quelltext gesehen zu haben: die Lösung ist wirklich simpel. Du brauchst keine Höhe zu definieren und auch nicht solche übermäßigen DIVs zu verwenden, es reicht so etwas:

<h2>Überschrift</h2>
<img ... style="width:150px; float:left;" />
<p style="margin-left:160px;">Beschreibungen...</p>

<h2 style="clear:left;">nächste Überschrift</h2>
...

freundliche Grüße
Ingo

[goldguysaffe]

Hallo Ingo,

»» <h2>Überschrift</h2>
»» <img ... style="width:150px; float:left;" />
»» <p style="margin-left:160px;">Beschreibungen...</p>
»»
»» <h2 style="clear:left;">nächste Überschrift</h2>

Das war jetzt tatsächlich die Lösung ;-) Ich habe die Div's behalten, weil ich teilweise auch 2 Bilder (links) habe. Aber das fehlende margin-left:160px im rechten Div hat die Lösung gebracht.

Vielen Dank für die Hilfe

Grüße,
Andre