XHTMLforum - position: absolute und float kombinieren

Hi,

ich möchte ein Blockelement (div1) absolut positionieren und in ein anderes Blockelement (div2) hineinragen lassen. Gleichzeitig möchte ich den Text in div2 um den hineinragenden Teil von div1 umfließen lassen. Da durch die absolute Positionierung von div1 die float-Eigenschaft nicht mehr wirkt, überlagert div1 aber leider den Text.

Ohne absolute Positionierung kriege ich aber meine gewünschte Position nicht hin, aber vielleicht hat hier ja jemand eine Idee. div2 ist der Hauptcontainer, in dem der ganze Inhalt steckt, er ist 900px breit und mittig ausgerichtet (margin: auto). div2 ist ein kleinerer Einschub, also z.B. ein Teaser für einen anderen Titel, ein hervorgehobenes Zitat oder ein Bild. div2 soll immer den linken Fensterrand berühren und gleichzeitig bis zur Mitte in div1 hineinragen.

Eigentlich soll es aussehen, wie im angehängten Beispielbild relative.png. Da wächst nur leider div2 nicht automatisch mit. Bei absolut.png ist div2 absolut positioniert, überlagert aber wie gesagt den Text.

In CSS sieht das Ganze mit position: relative; so aus:

Code:

#div1 {

  max-width: 900px;

  margin: auto;

  }



#div2 {

  float: left;

  background: #2C633A;

  color: #FCC500;

  position: relative;

  margin: 0 2em 1em -50%;

  width: 100%;

  text-align: right;

  font: 1em 'Roboto Condensed';

  display: flex;

  flex-direction: row-reverse;

}

Hat jemand eine gute Idee, wie ich das hinkriege?