float + Box im Fluss, d.h. daneben bzw. drunter

[Julian Hofmann]

Hallo.

Mir fehlt die passende Idee zur Lösung. Habe eine Layout etwas so:

+-----------------------+----------+
| div#content           | div#box  |
|                       |          |
|                       +----------+
|                                  |
+----------------------------------+

Die Box ist per float:right gesetzt und ihre Höhe/Existenz nicht vorhersagbar. Im Hauptteil (div#content) soll der Text die Box umfließen - was er auch schön tut.

Problem:
Bei Fehlermeldungen (als DIV realisiert) im Hauptteil möchte ich diese per Umrandung (border) hervorheben. Dabei ersteckt sich die Umrandung der Meldung aber auf die volle Breite, d.h. auch hinter die Box. Der Inhalt der Meldung wird an der Box vorbeigeführt (So wie es wohl der Standard vorsieht).

Lösung?
Gibt's einen Ansatz mit HTML und CSS das zu umgehen? D.h. eine Lösung, dass ein Blockelement sich der zur Verfügung stehenden Breite neben floatenden Elementen anpasst?

Grüße aus Würzburg
Julian

[Alexanders]

Hallo,
ich weis ned obs klappt aber probier doch mal mittels z-index die content-box nach hinten und die box-box nach vorn zu holen. Dann müsste der Rahmen überdeckt sein. (Aso ja du wirst dann ne hintergrundfarbe im Rahmen brauchen damit man ned durchschauen kann)

[Julian Hofmann]

Hallo.

probier doch mal mittels z-index die content-box nach hinten und die box-box nach vorn zu holen. Dann müsste der Rahmen überdeckt sein.

So ist es ja schon. Ich suche eine Lösung, wie ich neben bzw. unter das rechte Div einen Containe rbekomme, der seine rechte Grenze auch _neben_ dem rechten DIV hat.

Grüße aus Würzburg
Julian

[Detlef G.]

Hallo Julian

Gibt's einen Ansatz mit HTML und CSS das zu umgehen? D.h. eine Lösung, dass ein Blockelement sich der zur Verfügung stehenden Breite neben floatenden Elementen anpasst?

Ja, versuche mal:

  
/* erstmal für die Browser */  
#fehlermeldung {  
 border:10px solid red;  
 overflow:auto;  
}  
/* und jetzt für IE */  
* html #fehlermeldung {  
 overflow:visible;  
 height:5px;  
}  

(ist von mir nur unter W98 in FF 1.5.0.3, Opera 8.54 und IE 6 getestet)

Auf Wiederlesen
Detlef

[Julian Hofmann]

Hallo Detlef.

Danke!

Viele Grüße aus Würzburg
Julian

Eine Lösung, dass sich ein Blockelement (und nicht nur dessen Inhalt) der zur Verfügung stehenden Breite neben floatenden Elementen anpasst:

  
/* erstmal für die Browser */  
div#fehlermeldung {  
  border: 2px solid red;  
  overflow:auto;  
}  
/* und jetzt für IE */  
* html div#fehlermeldung {  
  overflow:visible;  
  height:5px;  
}  

Läuft unter

• W98: FF 1.5.0.3, Opera 8.54 und IE 6
• WinXP: FF 1.5.0.3, Opera 8.54 und IE 6
• Linux: FF 1.5.0.3