Einfacher Float funktioniert nicht

[Tease]

Hallo zusammen, bin gerade beim erstellen einer neuen Site auf ein Problem gestoßen für das ich im Augenblick keine Lösung habe, weil es sich mir einfach unerklärlich ist.

Ich möchte ganz einfach in einem DIV zwei Texte nebeneinander floaen lassen, sprich wie in einer Tabelle, links soll der Eintrag "Datum" hinkommen und rechts auf gleicher Höhe der Eintrag "Was". Hier stellt sich aber das Problem, dass er meinen 2 Eintrag (also "was") zwar rechts davon hinschreibt aber nach unten versetzt, so als ob nicht genügen Platz zum floaten wär, was aber eigenltich schon der Fall ist. Der IE7 stellt es übrigens als einziger Browser so dar, wie ich das will. :lol:

Hier die relevanten Zeilen HTML-Code:

<div class="terminliste">
<p class="datum">Datum</p>
<p class="was">Was</p>
</div><!-- end of terminliste -->

Und die dazugehörige css:
.terminliste {
padding-top: 60px;
width: 211px;
height: 204px;
}
#termine .datum {
float: left;
width: 65px;
}
#termine .was {
float: right;
width: 125px;
}
(Anmerkung: die "Terminliste", liegt im Container "termine", deswegen auch der Pfad "#termine .was")
Also das Container DIV ist 211pc breit, und beide darin befindlichen floats zusammen 190px (65+125). Warum verschiebt Firefox, diesen "was" Bereich dann in die nächste Zeile?

Firefox (so siehts auch bei IE8, Safari, Chrome etc. aus):


Uploaded with


IE7 weiß, was ich eigentlich machen wollte:


Uploaded with

Wäre nett, wenn mir hier jemand helfen könnte.

 

[Llynyania]

AW: Einfacher Float funktioniert nicht

lass #termine weg und lasse die .datum und das andere für sich stehen.

oder korrigieren in .terminliste - das ist ja das elternteil - nicht #

class = .
id = #

grüßle

 

[Tease]

AW: Einfacher Float funktioniert nicht

lass #termine weg und lasse die .datum und das andere für sich stehen.

oder korrigieren in .terminliste - das ist ja das elternteil - nicht #

class = .
id = #

grüßle

Hat leider auch nix gebracht.
Ich habe, gleichzeitig zu deiner Antwort, meinen obigen Post editiert. Der Container #terminliste, liegt in #termine. Deswegen dachte ich, dass so auch in Ordnung ist.

 

[Llynyania]

AW: Einfacher Float funktioniert nicht

sowas hatte ich mir fast gedacht.

jetzt mal zu dem, was es werden soll - eine auflistung? also geht darunter diese auflistung weiter?

ausprobieren: hab hier einen footer, der dasselbe tut, er hat auch einen äußeren div noch (hier nicht mit eingefügt) - dieser gibt ihm die Breite - wäre bei dir #termin.
der clearer setzt die floats zurück.

<div class="footer">
<div class="left"> Copyright </div>
<div class="right">Design </div>
<div class="clearer"></div>
</div>

.footer {
background: transparent;
color: #EED;
padding: 10px;
}
.footer .left {
width: 66%;
}
.footer .right {
width: 33%;
text-align: right;
}
.left {
float: left;
}
.right {
float: right;
}
.clearer {
clear: both;
}

Bitte 'EDIT' benutzen um Doppelpoosts zu vermeiden- Code-Bereiche für Code verwenden

 

[derkk_koenig]

AW: Einfacher Float funktioniert nicht

Mal nebenbei:
Nimm doch besser dl -> dd und dt ... dann ist es auch semantisch korrekt(er) als p-Tags

VG

der kk_koenig

 

[MyBad]

AW: Einfacher Float funktioniert nicht

Wenn du die beiden Sachen nebeneinander haben willst, solltest du beides auch links floaten. Wenn du ein Element rechts floaten möchtest, musst du es vor das erste Element legen.

Also:

<div class="terminliste">
<p class="was">Was</p> <!-- float: right; -->
<p class="datum">Datum</p>
</div><!-- end of terminliste -->

Aber derkk_koenig hat schon recht. Arbeite mit Definitionslisten (dl), damit ist es dann auch semantisch korrekt. Aber wie du es löst überlasse ich dir.

 

[derkk_koenig]

AW: Einfacher Float funktioniert nicht

Wenn du die beiden Sachen nebeneinander haben willst, solltest du beides auch links floaten. Wenn du ein Element rechts floaten möchtest, musst du es vor das erste Element legen.

Also:

<div class="terminliste">
<p class="was">Was</p> <!-- float: right; -->
<p class="datum">Datum</p>
</div><!-- end of terminliste -->

Aber derkk_koenig hat schon recht. Arbeite mit Definitionslisten (dl), damit ist es dann auch semantisch korrekt. Aber wie du es löst überlasse ich dir.

Das stimmt nicht ganz: man muss keine rechts floaten sachen (divs) vor das erste Element legen.. es geht auch in der 'richtigen' Reihenfolge.
Anders ist das bei imho nur bei Bilder, die im Text-Fluss liegen... aber auch da bin ich mir gerade nicht mal sicher.

vg

der kk_koenig

 

[MyBad]

AW: Einfacher Float funktioniert nicht

Das stimmt nicht ganz: man muss keine rechts floaten sachen (divs) vor das erste Element legen.. es geht auch in der 'richtigen' Reihenfolge.
Anders ist das bei imho nur bei Bilder, die im Text-Fluss liegen... aber auch da bin ich mir gerade nicht mal sicher.

vg

der kk_koenig

Sicher? Denn float:right bedeutet ja, das die nachfolgenden Elemente das Element darüber links umfließen, oder nicht? Ich habe zumindest immer festgestellt, dass das rechts gefloatete Element dann immer unter dem Element war, von dem es eigentlich umflossen werden sollte (siehe Screenshot des Threadstellers).

 

[derkk_koenig]

AW: Einfacher Float funktioniert nicht

Sicher!!

2 floatende elemente in richtiger reihenfolge (eins links, eins rechts, beide eine fixe weite) in einem element mit einer weite, die mindestens die der beiden floatenden entspricht... funzt wunderprächtig

VG

der kk_koenig

 

[MyBad]

AW: Einfacher Float funktioniert nicht

Ja, man lernt halt nie aus... danke dir für den Tipp.

 

[derkk_koenig]

AW: Einfacher Float funktioniert nicht

gerne

vg

der kk_koenig