Bild links vom DIV und außerhalb des Textflusses
 

Hallo Leute,

ich versuche gerade ein Layout nach diesem Muster aufzubauen:

http://doktorw.do.ohost.de/xhtmlforum/inhalt_layout.png

Hier der bisherige Code dazu: Test

In der rechten dunkelroten Spalte (#content) stehen die Texte und in der linken Seite die Überschriften und Bilder. Das mit der Überschrift funktioniert schon. Dazu habe ich sie rechts ausgerichtet und mit position:relative; nach links verschoben, sodass sie außerhalb der dunkelroten Box liegt.

Mit dem Bild will ich jetzt praktisch das Selbe anstellen (so soll es dann aussehen: klick). Aber weil das Bild ja links neben dem Text stehen soll, muss es noch so formatiert werden, dass es keinen Platz im Textfluss beansprucht. Mit position:absolute; ging es nicht, da ich das Bild dann nicht relativ positionieren kann. Mit position:relative; (so wie mit der Überschrift) ging es auch nicht, da es im Textfluss Platz beansprucht (dann bleibt der Platz rechts neben dem Bild leer).

Wie bekomme ich das hin?

Moin,

mach doch in #container zwei div's (#links und #rechts).
Diese läßt du floaten.

Erstmal brauchst du weder position:relative noch absolute.
In #links steht die h1 und das img.

Wenn die nacheinander im Quelltext stehen ordnen sie sich auch untereinander an. ;)

Das wäre die unsaubere (Not-)Lösung. Ich möchte aber das CSS an das Markup anpassen und nicht umgekehrt, aber trotzdem danke ;)

Float und negativer Margin für das Bild.

Damit funktioniert es im Firefox und IE7 super, tausend Dank.

Die aktuelle Version: Test

Der IE6 hat aber damit ein Problem. Er erkennt zwar den negativen marigin, aber er zeigt den Abschnitt des Bildes, das über das Div hinausgeht nicht an.

(position:absolute; würde nicht helfen, weil das Bild dann nicht mehr vom #container-Div eingeschlossen wird und ich das unbedingt brauche.)

Das ist ein altbekannter Bug. Lesestoff: Über hasLayout ? das Konzept des hasLayout im IE/Win | Deutsche Übersetzung

Mit position:relative; gehts einwandfrei, tausend Dank.