Bild überlappt einen <div>-Bereich...

[Vaio82]

Hallo zusammen,

es handelt sich um ein ganz triviales Problem, aber mir fehlt gerade die CSS-Syntax, um zu einem erfolgreichen Ergebnis zu gelangen.

Angenommen ich habe einen <div>-Bereich (<div> </div>: In diesem Befindet sich ein Bild mit dem style float: right oder left.

Dieses Bild überlappt nun diesen <div>-Bereich...

Beispiel:

Mit welchem Attribut innerhalb der CSS-Klasse kann ich das unterbinden?


Schöne Grüße,
Claus

 

[Quaese]

Hi Claus,

ich tipp mal ins Blaue hinein. Das Bild soll im oberen DIV enthalten sein und nicht über seine
untere Grenze hinausgehen.

Sicherlich hast Du noch anderen Inhalt im DIV, der die Höhe vorgibt. Da das Bild durch die
float-Eigenschaft aus dem Textfluss genommen wurde, trägt es auch nicht mehr zur
dynamischen Höhenanpassung bei.

Um das zu umgehen, fügst Du einfach am Ende des DIV-Containers ein Element ein, das
durch seine Grösse nicht ins Layout eingreift und zugleich die float-Eigenschaft durch
clear: both wieder aufhebt.

Ein solches Element könnte ein DIV sein:

<div style="height: 0; line-height: 0; font-size: 0; clear: both;">&nbsp;</div>

Ich hoffe, Dein Problem richtig verstanden zu haben.

Ciao
Quaese

 

[Vaio82]

Genau das meinte ich...

Allerdings passt ein solches Div nicht in meine Layoutstruktur und den Textfluss...

Dann müssen Bilder halt immer in Kombination mit Text eingefügt werden...

Sollte auch nicht tragisch sein. Habe im cms einen Code-Schnipsel definiert, der dennoch
das kleine Problem lösen kann, falls Bedarf besteht.

Danke sehr


Bye Quaese

Claus

 

[annika956]

Vielen Dank!
Mir hat das sehr geholfen!