Rollover mit float left ?

[Biomechaniker]

Hallo,

ich habe eine Rollover image folgendermaßen in CSS erstellt:

Code: Alles auswählen

#felix {
   display:block;
    background-image:       url(images/felix_a.png);
    width:                  150px; 
    height:                 164px; 
   
}

#felix:hover {
    background-image:        url(images/felix_b.png);
}

dieses div befindet sich in folgendem:

Code: Alles auswählen

  <div class="content bg1">
     
        <ul>
         
            <div id="felix">          </div>
        </ul>
       
      </div>
      </div>

wobei die definition von content, bg1 und ul folgendermaßen aussieht:

Code: Alles auswählen

.bg1 {
   background: #000000 url(images/image03.jpg) repeat-x left top;
}

.content {
   padding: 10px 30px 20px 30px;
}

ul {
   margin-left: 0px;
   list-style-type: none;
   background:#444540;
   border: 1px #929291 solid;
   padding: 10px 10px 10px 10px;
}


das ganze sieht jetzt so aus:



mein problem: wie bekomme ich rechts neben die bg-grafik, also neben felix div, noch ein weiteres div , wo ich einen text reinschreiben kann ?

leide rkann ich nicht "float left" auf bg-grafiken anwenden.

hat jemand eine idee ?

danke