Headline links und Optionen rechts?

[FunkyMonkey]

Hallo

ich versuche gerade mit DIV-Containern folgendes hinzukriegen:

Auf der linken Seite soll eine Überschrift stehen (Headline). In der selben "Zeile" soll auf der rechten Seite ein Icon hin. Das Layout ist flüssig und die Breite steht leider nicht fest.

Ich habe es so probiert:

/* Separator & Headline, Options */
.separator_headline {
	width:99.4%;
	background-color: #cccccc;
	margin: 0 5px 7px 5px; /*oben links unten rechts*/
}
.separator_headline h2 {
	margin: 0 5px 7px 5px; /*oben links unten rechts*/
	width:70%;
	float:left;
}
.separator_headline_options {
	width:30%;
	margin: 0 5px 0 5px; /*oben links unten rechts*/
	text-align:right;
}

dazu der html-code:

<div class="separator_headline">
	<h2>Hier steht der Titel</h2>
	<div class="separator_headline_options">mehr</div>
</div>

die Option erscheint nicht rechts davon sondern mittig unter dem Balken. float:left hat hier auch nicht viel gebracht... hat jemand eine idee wie man so etwas lösen könnte?

----- edit ----
habe noch was anderes ausprobiert:

<div style="height:25px;background-color:#cccccc;">
	<div style="float:left;width:70%"><h2 style="margin: 1px 5px 0 5px;">Titel steht hier</h2></div>
	<div style="float:left;width:30%;text-align:right;">
		<div style="padding-right:5px;">mehr...</div>
	</div>
</div>

im Firefox klappt es, aber im MSIE tritt ein sehr seltsamer Fehler auf. Wenn man das Browserfenster ganz langsam verkleinert oder vergrößert, flackert die Option "mehr..." stark und wandert ab und zu mal nach unten, dann wieder nach oben rechts, wieder nach unten usw.

Nehme an da gibt's noch eine schlauere Lösung?

 

[Maik]

Hi,

zeichne das rechte DIV anstelle von float:left mit float:right aus.