bild schiebt div nicht auseinander

Status
Nicht offen für weitere Antworten.
J

JamesT

Erfahrenes Mitglied
Hallo Css kundige,

ich hab eine kurze Frage, ich hab für einen Newsbereich, einen Div in dem ein Bild und ein Text ist, ist der Text nicht lang genug, um unter dem Bild weiterzulaufen, schiebt das Bild den div nicht bis auf die richtige Höhe.

Anbei ein Screenshot.

Hat dazu jemand einen Lösungsvorschlag?

Grüße

Jamest
 

Anhänge

  • div_bild.jpg
    div_bild.jpg
    14,1 KB · Aufrufe: 13
Hi,

offensichtlich muss die Floatumgebung zum Abschluss "gecleart" werden, damit die umschliessende Box ihre tatsächliche Höhe annimmt und der Inhalt das Element am unteren Rand nicht überlappt - siehe hierzu http://positioniseverything.net/easyclearing.html

Die in dem Artikel genannte Klasse .clearfix wird dann in dem umschliessenden DIV aufgerufen.

Sollte das DIV schon eine Klasse besitzen, werden eben beide Klassen kombiniert:

Code: 
<div class="eine_klasse clearfix"> ... </div>
 
Ich hatte das gleiche Problem auch schon mal.
Trotz "clear"!
Da das Bild die float-Eigenschaft besitzt, wird die Höhe des div-Tags nun nur noch vom Text daneben vorgegeben, das heißt solange der Text wenigstens die Höhe des Bildes hat, gibt es keine Probleme. Da ich fast immer längeren Text hatte, habe ich die eine Stelle an der der Text mal "zu kurz" war, mit Umbrüchen aufgefüllt, gebe aber gern zu, dass das keine tolle, intelligente Lösung ist, die Dir weiter hilft...
 
Zuletzt bearbeitet:
Schau dir zunächst mal dieses Modell in einem nicht-IE-Browser an:

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<meta name="author" content="Maik">
<title>tutorials.de | demo_wenco</title>

<style type="text/css">
<!--
.box {
width:300px;
border:1px solid red;
}
-->
</style>

</head>
<body>
<div class="box">
     <img src="pfad/zur/grafik.jpg" height="200" width="100" style="float:left;"><p>dummy text dummy text dummy text</p>
</div>
</body>
</html>
und anschliessend das hier:

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<meta name="author" content="Maik">
<title>tutorials.de | demo_wenco</title>

<style type="text/css">
<!--
.box {
width:300px;
border:1px solid red;
}

.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

.clearfix {display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
-->
</style>

</head>
<body>
<div class="box clearfix">
     <img src="pfad/zur/grafik.jpg" height="200" width="100" style="float:left;"><p>dummy text dummy text dummy text</p>
</div>
</body>
</html>
 
Also beide Beispile funktionieren bei mir ohne Probleme :)

Nimm mal im 1. Beispiel die width: raus, dann haben wir wieder unser Problem. Eine Lösung scheint also zu sein, dem div eine Breite zu geben...?
 
Wer lesen kann, ist klar im Vorteil:
Maik hat gesagt.:
Schau dir zunächst mal dieses Modell in einem nicht-IE-Browser an
Zum Vergrößern anklicken....
wenco hat gesagt.:
Also beide Beispile funktionieren bei mir ohne Probleme :)

Nimm mal im 1. Beispiel die width: raus, dann haben wir wieder unser Problem. Eine Lösung scheint also zu sein, dem div eine Breite zu geben...?
Zum Vergrößern anklicken....
Dann hast du die Beispiele im IE betrachtet, denn das erste Beispiel demonstriert in den "nicht-IE"-Browsern genau den Darstellungsfehler, wie ihn JamesT umschrieben und mit dem Screenshot (Ist-Zustand) dokumentiert hat.

Die Breitenangabe spielt hier, abgesehen vom IE, überhaupt keine Rolle, denn der Fehler tritt in den modernen Browsern (Firefox, Opera & Co.) mit oder ohne Breitenangabe auf, und das zweite Beispiel mit der "clearfix"-Technik funktioniert gleichermaßen ohne Breitenangabe.

Ansonsten solltest du dir den empfohlenen Artikel http://positioniseverything.net/easyclearing.html zu Gemüte führen.
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück