✔ Div positionieren - anderes Div rutscht in Überschrift

[schutzgeist]

Hallo,

ich steh grad vor einem Problem und weiß nicht, wie ich das gelöst bekommen soll.
Bei jeder Änderung verschiebt sich ein Div mit und ich finde den Fehlerteufel einfach nicht.

<h2>Geliebt</h2><div class="up"><img src="img/up.png" alt="nach oben" width="8" height="8" /></div>
<ul>
<li>...</li>
<li>...</li>
<li>...</li>
</ul>

Ich möchte, dass das Div mit dem Bild neben der Überschrift rechts angezeigt wird.
Wenn das Bild dann mal oben ist, rutscht mir allerdings die Auflistung nach, sprich, in die Überschrift rein.
Zudem ist die Position gegenüber FF/IE auch unterschiedlich.
Gibt es die Möglichkeit den Umbruch nach dem <h2>-Tag zu unterdrücken oder sonst eine Lösung?

CSS dazu:

#content h2{
font-size: 11px;
border-bottom: 1px dotted #999999;
font-weight: bold;
}
#content ul {
list-style-type: none;
margin-top: 5px;
margin-left: 5px;
padding-left: 5px;
}
.up {
text-align: right;
margin-top: -25px;
}

Das Problemkind live:
klick

Danke schonmal

Edit
Ich seh grad, dass die Überschrift so nicht stimmt
Nicht das div, sondern die Auflistung rutscht in die Überschrift... :/

 

[Maik]

Probier es mal mit diesem Stylesheet:

#content h2 {
font-size: 11px;
border-bottom: 1px dotted #999999;
font-weight: bold;
margin: 0;
}

#content ul {
clear: right;
list-style-type: none;
margin-top: 5px;
margin-left: 5px;
padding-left: 5px;
}

.up {
float: right;
text-align: right;
}

.up img {
display: block;
margin-top: 4px;
}

Und tausche hierfür im HTML-Code die Reihenfolge der Überschrift und des DIV .up, da das DIV von der Überschrift umflossen wird:

<div class="up"><img src="img/up.png" alt="nach oben" width="8" height="8" /></div>
<h2>Geliebt</h2>
<ul>
<li>...</li>
<li>...</li>
<li>...</li>
</ul>

 

[schutzgeist]

Hm... noch nicht ganz...
FF ist der Pfeil jetzt an der richtigen Stelle... Allderings rutscht nun das Bild bei 'In Kürze' hoch an den Rand...
Und im IE gestellt sich der Pfeil ebenfalls ganz nach oben... :suspekt:

 

[Maik]

Okay, hier mein nächster Vorschlag

#content h2 {
font-size: 11px;
border-bottom: 1px dotted #999999;
font-weight: bold;
margin: 0;
}

#content ul {
list-style-type: none;
margin-top: 5px;
margin-left: 5px;
padding-left: 5px;
}

.up {
float: right;
text-align: right;
margin-top: -10px;
}

/* entfällt */
/*.up img {
display: block;
margin-top: 4px;
}*/

<h2>Geliebt</h2>
<div class="up"><img src="img/up.png" alt="nach oben" width="8" height="8" /></div>
<ul>
<li>...</li>
<li>...</li>
<li>...</li>
</ul>

 

[schutzgeist]

Ui klasse
Vielen lieben Dank