Guten Tag,

ich habe ein großes Problem mit einer Div Box.
Es geht darum, dass ich in einem Div ein Bild drinne habe.

Wenn ich dem Div nun eine Hintergrundfarbe gebe, sehe ich, dass das Div das Bild automatisch erkennt und die Höhe auf die Höhe des Bildes anpasst.
Genau so will ich das auch haben. Nur wenn ich jetzt das Bild floate (float: left). Dann erkennt das Div das Bild nicht mehr und passt sich nicht mehr automatisch an.

Ich weiß das ich dem Div jetzt eine Höhe geben könnte und einfach angeben, dass das Div so hoch ist wie das Bild. Jedoch brauch ich dieses "automatische Anpassen", weil ich eine responsive Seite habe.

Ich hoffe ihr versteht was ich meine. Wenn ihr das nicht tut, sagt es mir bitte, dann mache ich Screenshots. Ich bräuchte echt dringend Hilfe. Ich sitze seit Tagen dran.

Viele Grüße.

Hallo,

Grafiken bringen in der Regel überhaupt nichts. Es wäre am besten du würdest deine akuelle Seite online bereitstellen. Freewareprovider gibt es inzwischen ja wie Sand am Meer. Zum Beispiel blaced.net.

Gruss

MrMurphy

Alles klar, ja habe ich nun gemacht:

So sieht es aus ohne den float, also so wie ich es haben möchte:
Div Problem

Und sobald ich das Bild floate passiert das:
Div Problem


Viele Grüße

Hallo,

du hast eine Grundregel vom CSS nicht beachtet: Wer floatet MUSS auch clearen.

Dort wo der float beendet werden soll muss die CSS-Anweisung clear folgen, normalerweise "clear: both;"

Dafür gibt es zwei Möglichkeiten:

Entweder erhält das folgende Element mit den clear versehen, ich habe mal ein entsprechendes div eingefügt:

HTML5: Slexout - Floatproblem

Oder man erstellt eine Klasse, die dem umgebenden Element zugeordnet wird. Es gibt zwar keinen vorgegebenen Namen, aber gebräuchlich ist "clearfix". Das habe ich mal in meinem zweiten Beispiel verwendet:

HTML5: Slexout - Floatproblem

Gruss

MrMurphy

Wow! Vielen dank.

Ich hab Tage lang zumgespielt. Dabei ist es doch so simple..

Vielen, vielen, DANK!