Dies ist ein DIV-Bereich, der mit float:right an den rechten Rand gestellt ist mit einer festen Breite von 200px.

Er soll ein Menü mit Links enthalten. Links daneben soll dann Inhalt mit JavaScript angezeigt werden, indem DIV-Bereiche mit der CSS-Eigenschaft visibility sichtbar und unsichtbar gesetzt werden.

Und da isses natürlich wünschenswert, wenn der links umfließende Text auch mal eine Linie oder einen Hintergrund hat, der diesen DIV-Bereich auch berücksichtigt, aber das funktioniert nicht:
Text respektiert schon diesen DIV-Bereich, aber Hintergründe und Border-Linien gehen gnadenlos auf volle Breite - witzigerweise unter diesen DIV-Bereich.

Gesucht wird also eine Möglichkeit, eine Linie in voller Breite des links zu Verfügung stehenden Raumes, aber unter Berücksichtigung dieses DIV-Bereiches zu erhalten.

Tabelle mit H4 drin ohne Breitenangabe. So soll es aussehen. Jetzt nur noch den Hintergrund und die Linie definiert und fertig. Doch, oh Wunder:

Tabelle mit H4 drin ohne Breitenangabe, dadurch leider nicht breit genug.


Tabelle mit H4 drin ohne Breitenangabe, mit <HR> zum Aufspannen? Mist, geht nicht.


dito, aber Tabelle mit HTML zu 90% Breite

dito, ohne <HR>, aber Tabelle mit HTML auf 100%

dito, aber Tabelle mit CSS auf 100%

H4 ohne Breitenangabe

dito mit HTML auf 100%

P ohne Breitenangabe

dito mit HTML auf 100%

DIV ohne Breitenangabe
dito mit HTML auf 100%

Überschrift

Ja, so sieht es doch gut aus, oder? H2 innerhalb von DIV.
Ja, ohne Hintergrund und Linie. MIt beiden sieht es so aus:

Überschrift

Mit Hintergrund und Linie.

Also: Wie???

Ende float

Sollte es nur an DIV gelegen haben und mit P geht es?

Wäre ja der Hammer!

P ohne Breitenangabe

dito mit HTML auf 100%

DIV ohne Breitenangabe
dito mit HTML auf 100%