CSS - Zwei Elemente ausrichten

[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