Background Problem bei div mit Bild und Text

Div Container und das Bild hängt über den Div Container hinaus
div Container umfasst nicht das Bild

Man hat einen Div Container und darin soll ein Bild um den Text fließen – alles funktioniert wunderbar. Bloß der Hintergrund spielt nicht mit. Ein kleiner Balken wird gefärbt, das andere nicht. Andere beschreiben dieses Problem so: Das Bild geht über den Container hinaus. Dann wird gefragt, wie kann man das div so hoch machen, dass es das Bild einfasst – und zwar wenn man ständig unterschiedlich hohe Bilder hat.

Für dieses Problem gibt es unterschiedliche Lösungsansätze. Oft hat man eine Lösung mal gefunden und nutzt dann nur mehr die, doch wie meist: Probleme haben selten 1 Lösung :zwinker: So stelle ich hier einige mir bekannte Lösungen für das Problem: „Bild fließt um Text und der Background ist nicht gleich hoch“ vor.

Bild soll neben Text fließen und der Background sichtbar sein-meine Lösungsansätze

0 weiteren Div Containe drumherum

Die allererste Lösung, die den meisten einfällt ist einfach einen weiteren Div Container drumherum geben und in diesem den Background definieren. Ich bin sicher keine, die am Mark Up spart wo es nur geht -also weit vom Puristentum entfernt – doch dies sollte nur die absolute Notfalllösung sein.

So widme ich mich kurz den Grundvoraussetzungen:

IE braucht Padding
IE braucht Padding

Das Div braucht ein padding, sonst erkennen sehr viele Browser nicht die Höhe des Bildes und schneiden es unten ab, es ist fast egal, wie gering das Padding ist, es muss nur da sein.

Das Grund CSS meiner Beispiele ist daher:

Der Div Container hat die Class bild, das Bild hat die Class left.

.bild{background-color:#868686;
color:#000;
width:400px;
padding:0.3em;}
.left{float:left;
margin:10px;}

Dies reicht dem IE aus, um den Div Container in voller Höhe zu zeigen. Mozilla Browser wie der Firefox, Flock und der Opera machen dies nicht. Siehe 1. Bild in dem Artikel.

Dem Div Container eine fixe Höhe zuweisen

.bild2{background-color:#868686;
color:#000;
width:400px;
padding:0.3em;
height:180px;}

Gibt man dem Div eine fixe Höhe zeigen alle Browser den Hintergrund gut an, doch dies ist nicht immer realisierbar.

Display table hilft auch aus

.bild3{background-color:#868686;
color:#000;
width:400px;
display:table;
padding:0.3em;}

Gibt man dem Div Container die Angabe display table zeigt sich auch der volle Background, allerdings nur unter bestimmten Voraussetzungen, die man hier bei Quircksmode gut nachlesen kann. Dass dies der IE nicht kann ist irrelevant, weil er sowieso die volle Höhe des Div Containers anzeigt.

Clearfix – Auflösen des float hilft auch.

Positioneverthing hat vor Jahren bereits einen CSS Hack beschrieben der unser Problem ebenfalls gut löst.

Ich gab dem Div Container eine 2. class mit nämlich clearfix und die beschreibt sich so:

/*--clear--*/
.clearfix:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}
/* Hides from IE-mac \*/
* html .clearfix {
	height: 1%;
}
/* End hide from IE-mac */


Das Div selbst auch fließen lassen float left

.bild5{background-color:#868686;
color:#000;
width:400px;
float:left;
padding:0.3em;}

Läßt man den Div Container selbst auch nach Links fließen mit der Angabe float left, zeigen die Browser ebenfalls die volle Höhe des Containers an.

Welche Methode bevorzugst Du? Wo siehst DuTroubles bei den hier vorgestellten Lösungsmöglichkeiten?

Code kann aus Sicherheitsgründen nicht in den Kommentaren getippt werden. Bitte entities nutzen- Danke :-).

mts

Ebenfalls informativ und lesenswert

3 Kommentare zu “Background Problem bei div mit Bild und Text

  1. Webstandard-Blog

    In älteren bestehenden Projekten verwende ich auch die „Clearfix-Variante“, ansonsten versuche ich es bei neuen Projekten zu vermeiden.

  2. Markus Höffer

    Hallo,

    eine Frage zur fixen Höhe (Sorry, dass ich das hier schreibe):
    .bild3{background-color:#868686;color:#000;width:400px;display:table;padding:0.3em;}

    Was genau bewirkt display:table? Könnte man dies nicht in display:block machen, dann würde doch die volle Höhe sehen, oder?

    Und wie kann ich einem div eine dynamische, anpassbare höhe verpassen so wie beim table?

    Wäre sehr dankbar für deine Hilfe!

  3. mts

    ein div hat immer die Höhe, die es eben hat, es passt sich an, da muss man gar nichts machen, man kann dieses Verhalten aber verhindern,

    hier in dem Beispiel erklärte ich unterschiedliche Methoden und eine davon war eben display table, damit verhält sich das „div“ eben wie eine Tabelle im Browser