Spezielle Konstruktion

[Nils Boom]

Hallo zusammen!

Ich habe folgendes Problem:

So in etwa soll mein Ergebnis nachher aussehen:

http://www-users.rwth-aachen.de/Nils.Boom/vorlage.JPG

So sieht das zug. HTML aus:

<div class="theorie">
  <span class="theorie_titel">Theorie</span>
  <div class="textbereich">
    <div>test</div>
    <div>test</div>
  </div>
</div>

Und so die CSS-Einträge:

.theorie {
   background-color: #FFF;
   border-bottom: 1px solid #9d9d9d;
   background-image:url(icon_reading.gif);
   background-position:top left;
   background-repeat:no-repeat;
   margin-bottom: 30px;
   margin-top: 30px;
   text-align:left;
}

.theorie_titel {
    font-weight:bold;
    color: #568D14;
    font-size: 24px;
    letter-spacing:-1px;
    vertical-align: top;
    background: #FFF;
    padding-bottom: 0px;
    padding-right: 0px;
    margin-bottom: 0px;
    margin-left: 50px;
    background-image:url(corner.gif);
    background-position:top right;
    background-repeat:no-repeat;
    background-color:white;
    top: 0;
    display:block;
}

Das corner.gif sieht wie folgt aus:

http://www-users.rwth-aachen.de/Nils.Boom/corner.gif

icon_reading.gif:

http://www-users.rwth-aachen.de/Nils.Boom/icon_reading.gif

So weit, so gut.

Folgendes Problem habe ich allerdings: Da ich den span als disply:block deklariert habe, passt er sich nicht an den Text an, so dass bei längerem Text folgendes passiert:

http://www-users.rwth-aachen.de/Nils.Boom/vorlage2.JPG

Hat jemand eine Idee, wie ich es realisiert bekomme, dass das Hintergrundbild entsprechend mit nach rechts verschoben wird, wenn der Text länger wird?

Vielen Dank für eure Hilfe!

Schönen Gruß,

Nils