Zum Inhalt springen

Bild ragt aus dem DIV heraus

Erstellt am 10. Juni 2007 · 5 Antworten · letzte Antwort am 10. Juni 2007

Tags: HTML & CSS, Frage

Annna ·

Hallo an alle!

Ich erstelle gerade auf meiner Seite mehrere Mustertemplates.
http://www.busse-informatik.de/mustertemplates.html

Diese Templates haben mehrere Funktionen.

Da zu allen Templates der Code (html, css + typoScript) abgebildet ist, hoffe ich,
damit den einen oder anderen Einsteiger zu unterstützen.

Für mich erstelle ich die Templates, um das tabellenfreie Layouten zu erlernen.
Nun habe ich folgendes Problem, für das ich keine Lösung finde:
Wenn ich ein Bild/Text-Element in einen DIV einbaue der sich wiederum in einem float:left-DIV
befindet, und das Bild länger ist, als der Text,
dann ragt das Bild im Firefox über den DIV-Container hinaus.
http://www.busse-informatik.de/restaurant.0.html 🙁

Sicherlich gibt es dafür eine einfache Lösung. Wäre jemand so nett, mir die wohl zu verraten.

Vielen Dank im voraus.
Annna

P.S.
Glücklicherweise gibt es diese Probleme nicht wenn ich reines-Bild-Element einbaue.

just2b ·

Hallo,

entweder mehr Text oder

#m3_body { min-height:300px; }

, wobei man das unterm IE nochmals extra anführen muss mittels hack

georg

LuP ·

wie wäre's hiermit

#m3_body {
/* zusätzlich folgende Zeilen hinfügen */
position:relative;
left: 0;
top:0;
}

Annna ·

Hallo Just2b, Nickno & Lup!

Ich danke Euch für Eure schnellen Beiträge.
Um es gleich vorwegzunehmen

<br style="clear:both;" />

scheint super zu klappen!! 😃 😃

Mit der Ergänzung

position:relative; left: 0; top:0;

hatte ich irgendwie keinen Erfolg.

Die Idee von Just2b finde ich nicht so doll.
Stellt das System nicht unbedingt positiv dar, wenn ich dem Redakteur sage,
er muss mindestens so und so viel Text eingeben.
Und was wäre, wenn er plötzlich 2 Bilder untereinander erfassen will.
Dann ist die min-height-Lösung für die Katz´!

Vielen Dank also an alle.

Viele Grüße
Annna

claudia2 ·

hätte da noch eine Variante:

probier mal dem floatenden DIV noch ein display:inline; zu geben, dann sollten alle Elemente die sich innerhalb der floatenden DIV-Box befinden, auch von dieser umschlossen werden.

claudia