Background Problem bei div mit Bild und Text

in CSS, von mts

Bild soll neben Text fließen und der Background sichtbar sein. Hier stelle ich meine CSS Lösungen vor.

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 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:

padding fehlt

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:

Beispiel 1

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

Beispiel 2

.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

Beispiel 3

.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.

Beispiel 4

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

Beispiel 5

.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 Du troubles bei den hier vorgestellten Lösungsmöglichkeiten?

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

mts

Basis Know-how CSS
Internetmarketing

Top

1 zu : Background Problem bei div mit Bild und Text

1 Kommentar

Webstandard-Blog

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

27.01.10 um 11:11