In einem DIV etwas links und etwas rechts anzeigen

SideWinder

Ich will soetwas:

<div id="header">
Überschrift
Hier etwas Text                        [Btn1] [Btn2]
</div>

Wobei "Hier etwas Text" linksbünding in derselben Zeile wie die zwei Buttons sein soll, wobei die Buttons rechtsbündig sein sollen. Mit Tabellen würde ich eine Zeile, zwei Spalten haben.

Wie mache ich das mit CSS?

<div id="header>
Überschrift
<div>
<div>So geht es</div><div style="text-align:right; float:right">leider nicht.</div>
</div>
</div>

Da werden die Buttons eine Zeile *unter* dem linken Text dargestellt. Interessanterweise sogar unter dem bottom-border vom header-DIV?!?!

Hoffentlich kann jemand von euch Licht in die Sache bringen.

MfG SideWinder

SideWinder

Es hat geholfen beiden DIVs auf display:inline zu setzen. Allerdings ist die Größe des zweiten DIVs (Buttons sind höher als der Text) komisch. Sie geht über das äußere DIV (id=header) drüber

MfG SideWinder

<div id="header" style="width:500px;"> 
  &Uuml;berschrift 
  <div style="float:left;">So geht es</div><div style="float:right">aber</div>  
</div>

VlG

Dasd

Macht man das nicht klassischerweise so:

<html>
<head></head>
<body>
	<div id="header">
		Überschrift
		<div>
			<div style="text-align:right; float:left">So geht es</div><div style="text-align:right; float:right">doch.</div>
		</div>
		<br style="clear:all">
	</div>
	Text unter Überschrift.
</body>
</html>

Ansonsten gibt es inzwischen auch display:table(-row|-cell).

SideWinder

@hmmz: Wie gesagt, das wird dann unter dem border-bottom des äußeren DIV dargestellt, also nicht optimal.

@Dasd: Funktioniert, das clear-br ist offenbar der Clou.

Noch besser funktioniert jedoch die table/table-cell-Idee, da ich damit dann genau das Verhalten von Tabellen nachbilden kann:

<div style="display:table; width:100%; border: 1px solid black">
        <div style="display:table-cell; border: 1px solid blue">Ganz links</div>
        <div style="display:table-cell; border: 1px solid green">Mittig</div>
        <div style="display:table-cell;text-align:right; border: 1px solid red">
            Ganz rechts</a>
        </div>
    </div>

Inwiefern hilft mir da table-row und table-cell?

Edit: Danke euch

MfG SideWinder

TdZ

Das müsste ungefähr so gehen:

<div style="display:table-row">
   <div style="display:table-cell">Text</div>
   <div style="display:table-cell;text-align:right">Buttons</div>
</div>

Ich würd aber nach meinem Geschmack eher beides mit float:left machen.

schmidt-webdesign.net

TdZ schrieb:

Ich würd aber nach meinem Geschmack eher beides mit float:left machen.

Nicht nur du - und das ist keine Geschmacksfrage ...

Dasd

schmidt-webdesign.net schrieb:

TdZ schrieb:

Ich würd aber nach meinem Geschmack eher beides mit float:left machen.

Nicht nur du - und das ist keine Geschmacksfrage ...

Der Unterschied liegt doch nur im CSS. Das Markup bleibt dasselbe. Oder habe ich da etwas falsch verstanden?

SideWinder

schmidt-webdesign.net schrieb:

TdZ schrieb:

Ich würd aber nach meinem Geschmack eher beides mit float:left machen.

Nicht nur du - und das ist keine Geschmacksfrage ...

Du hast wohl den Thread nicht genau gelesen. Hier geht es nicht um Tabellen vs. DIV sondern um CSS vs anderes CSS

MfG SideWinder