✔ Positionierung von 3 Textelementen in zwei Zeilen

[Iches]

Hello there,

ich habe folgendes Problem und es wäre net wenn ich mir dabei helfen könntet:

Ich habe drei Text Elemente die wie folgt angeordnet werden sollen:

Links                                                            Rechts
                              Mitte

Es funktioniert auch alles super im FF nur leider im IE nicht, weil dort sieht es so aus

Links
                              Mitte
                                                                  Rechts

So sieht mein CSS aus:

.pic_left {
text-align: left;
color: #C00004;
float: left;
background-color: #FFFFFF;
}

.pic_right {
text-align: right;
color: #C00004;
width: 600px;
background-color: #FFFFFF;
}

.pic_center {
text-align: center;
width: 600px;
float: left;
}

Und so mein HTML Code

<div class='pic_left'>$vorher</div><div class='pic_center'>$link Zur&uuml;ck $back_text</a></div><div class='pic_right'>$nachher</div>

Danke schon mal für die Hilfe

 

[Maik]

Hi,

anhand des gezeigten Codeschnipsels bricht der IE6 bei mir die rechte Spalte nur aus dem Grund in die nächste Zeile um, weil für die Elemente nebeneinander kein Platz im Viewport ist - das gilt im übrigen auch für Firefox.

Achja, meine Auflösung: 1280*1024px

Wenn ich die Breitenangaben verringere, rückt das DIV .pic_right eine Zeile nach oben.

Wie lautet denn der übrige Quellcode?

 

[Iches]

Darüber ist noch ein ein
<div id="content">

welches folgende CSS-Code hat:

#content {
font-size:11px;
width: 600px;
font-family : Verdana, Arial, Helvetica, sans-serif;
color : #2E2E2E;
float: left;
background-color: #FFFFFF;
}

 

[Maik]

Was meinst du mit darüber?

<div id="content">
     <div class='pic_left'>$vorher</div>
     <div class='pic_center'>$link Zur&uuml;ck $back_text</a></div>
     <div class='pic_right'>$nachher</div>
</div>

oder

<div id="content"> ... </div>
<div class='pic_left'>$vorher</div>
<div class='pic_center'>$link Zur&uuml;ck $back_text</a></div>
<div class='pic_right'>$nachher</div>

 

[Iches]

Die erste Möglichkeit natürlich.

 

[derpfaff]

probier mal die Reihenfolge im HTML-Code zu ändern. Erst das rechte Element einbinden, dann das linke und anschließend die Mitte...
Vielleicht auch leicht verdreht, jedenfalls zuerst das rechte Element. Hatte mal ein ähnliches Problem, da hat es dann so funktioniert.

 

[Maik]

So natürlich ist das für einen Außenstehenden erstmal nicht.

Überprüf mal die Breitenangaben für die beiden Spalten .pic_right und .pic_center, die ja in der Addition mit der dritten Spalte nicht mehr als die 600px vom DIV #content betragen dürfen.

 

[Iches]

So natürlich ist das für einen Außenstehenden erstmal nicht.

Überprüf mal die Breitenangaben für die beiden Spalten .pic_right und .pic_center, die ja in der Addition mit der dritten Spalte nicht mehr als die 600px vom DIV #content betragen dürfen.

Super es klapt nun, der Fehler war das bei pic_right 600px als Breite drin stand. Was eine neue Zeile ergibt, was der FF, aber wohl nicht so interpretiert hat.

Danke das ihr mir geholfen habt.

 

[Maik]

Keine Ursache

Und markiere den Thread bitte noch als erledigt, vielen Dank.