CSS - Zwei Elemente ausrichten

[Balu der Bär]

Moin,

wiedermal ein kleines CSS-Problem:
Ich habe ein <div>-Element, circa 500px breit. In diesem sollen nun zwei Texte ausgegeben werden. Das eine soll linksbündig also am linken Rand und das andere rechtsbündig am rechten Rand sein. Jedoch bekomm ich es einfach nicht hin.

Code:

.rechts
{
text-align: right;
}

<div class="header">[img]img/earth.png[/img]<?php echo $variable ?><span class="right>[url="test.php"][img]img/stop.png[/img][/url]</span></div>

Jedoch wird das nichts rechts ausgerichtet, beide Texte und Bilder stehen links. :roll:

Hat jemand nen Tipp für mich. Danke,

JJ1

[Andreas L.]

du könntest in den Div noch zwei weitere einfügen:

Code:

<div width="500">
<div align="left" width="250">blabla</div>
<div align="right" width="250">blabla</div>
</div>

[Balu der Bär]

Eben nicht, darauf wär ich auch gekommen. ;)

Die Elemente müssen auf der selben Zeile (Höhe) sein, bei deinem Beispiel sind sie untereinander.

[r2c2]

Versuchs mal so:

Code:

<div> 
  <div style="width:50%; float:left;"> 
    
  </div>
  <div style="width:50%; float:left;"> 
     
  </div>
</div>

mfg

Christian

[citybreaker]

Versuchs mal so.

Code:

<div> 
  <div style="width:50%; float:left; position: absolute;"> 
    
  </div>
  <div style="width:50%; float:left; position: absolute;"> 
    
  </div>
</div>

[DGL-luke]

Mein Vorschlag:

Code:

<div> 
  <div style="width:50%; float:left;"> 
    abcdefg
  </div>
  <div style="width:50%; float:right; text-align: right"> 
    abcdefg
  </div>
</div>

:stupid:

[S2B]

Und meiner:

Code:

<div>
  <div style="float: left; width: 50%">Links</div>
  <div style="margin-left: 50%; text-align: right">Rechts</div>
</div>

[alcaeus]

@citybreaker: position:absolute bringt nur was, wenn du auch Positionsangaben angibst. Was auf alle Faelle passiert ist, dass das Element aus dem normalen Textfluss rausgenommen wird, das heisst alles was "nach" dem div kommen sollte, kommt unter das div ;)

Greetz
alcaeus

[Balu der Bär]

Danke euch allen, hat jetzt bestens geklappt. :-)

Edit: Im IE sieht das Layout zwar total zerschossen aus, da es im FF und Opera gut aussieht kann ich auch nichts dafür wenn der IE nichts korrekt darstellt. :wall:

[S2B]

:gruebel:

Zerschossen im IE? Welchen Code hast du denn verwendet?

[Balu der Bär]

Moin S2B,

ich habe deinen Code verwendet. Problem ist nur das dein Code jetzt noch umgeben von 2 weiteren <span>-Containern ist, die sozusagen des Grundgerüst des Layouts bilden. Und beim guten IE landet das Element welches rechts ausgerichtet werden sollten eine Zeile drunter, anstatt wie im Opera & FF perfekt am rechten Rand.

[S2B]

Hmm, das müsste ich mir mal genauer anschauen. Kannst du vielleicht ein bisschen Code posten?

[Balu der Bär]

Zitat:

Zitat von S2B

Kannst du vielleicht ein bisschen Code posten?

Aber gerne. ;)

Quelltext des Abschnittes:

Code:

<div class="main">
<div class="header"><span class="maintext">
<span> 
  <span style="float: left; width: 97%">  
    [img]img/earth.png[/img]<?php echo $siteurl ?>
  </span> 
  <span style="margin-left: 3%; text-align: right">  
    [url="<?php echo siteurl; ?>"][img]img/stop.png[/img][/url]   
  </span> 
</span></span></div></div>

Stylesheets:

Code:

.main {
 text-align:center;
 margin: auto;
      }
.header {
 border: 1px #9A9A9A solid;
 width:750px;
 text-align:left;
 background-color: rgb(227,227,227);
 margin: auto;
 margin-top: 10%;
        }
.maintext {
 font-family: Verdana, Tahoma, Arial, serif;
 font-size: 12px;
          }

Vielen Dank schonmal,

[alcaeus]

Moin,

das Umbrechen kommt (wie soll es auch anders sein), daher, dass nicht mehr genug Platz ist um das Element daneben anzuzeigen. Gib dem ersten span eine Breite von 50% anstatt 97%, und guck es dir nochmal an ;)

Greetz
alcaeus

[Balu der Bär]

Moin Andy,

ja so hatte ich es ja anfangs auch. Problem ist nur, dass das Bild dann eben nicht am rechten Rand ist. Und im FF und Opera reicht der Platz ja auch, dort wird es wie gewünscht angezeigt. Warum hat dann der IE nicht genug Platz?

Btw, ein einfaches text-align: right bewegt das Bild auch nicht an den rechten Rand. :?

Edit: :wall: So geht es jetzt

Code:

<div class="main">
<div class="header"><span class="maintext">
<span> 
  <span style="float: left; width: 50%">  
    [img]img/earth.png[/img]<?php echo $siteurl . $nautilus_header ?>
  </span> 
  <span style="margin-left: 46%; text-align: right">  
    [url="<?php echo $siteurl; ?>"][img]img/stop.png[/img][/url]   
  </span> 
</span></span></div></div>

Danke an alle. :-)

[S2B]

Ähm, ich finde es ja schön, dass du so ein span-Fän bist, aber spans sind nicht dafür da, um gefloatet zu werden. :stupid: Ersetz mal die ganzen spans, die eigentlich Block-Elemente vertreten, durch divs. :wink:

Edit: Ich hoffe doch, dass ich jetzt nichts falsches gesagt habe, es scheint ja auch so zu gehen. :duck:

[alcaeus]

Zitat:

Zitat von Balu der Bär

Btw, ein einfaches text-align: right bewegt das Bild auch nicht an den rechten Rand. :?

Ein float:right wird es aber tun ;)

Greetz
alcaeus

[Balu der Bär]

Mit diesen floats kann ich mich irgendwie nicht so Recht anfreunden. :mrgreen:

[r2c2]

Zitat:

Zitat von Balu der Bär

Mit diesen floats kann ich mich irgendwie nicht so Recht anfreunden. :mrgreen:

Die sind aber sehr praktisch. Guck dir mal das http://de.selfhtml.org/css/layouts/mehrspaltige.htm und das http://de.selfhtml.org/css/eigenscha...rung.htm#float an.

Da ist das sehr gut beschrieben...

mfg

Christian