h-Tag links und p-Tag rechts in einem div

[Muckel]

Guten Tag zusammen,

ich habe ein div (oben) und in jenem möchte ich die Überschrift h1 links anordnen und den p-Tag rechts daneben. Das ganze habe ich versucht, so um zu setzen:

#oben {
    display:block;
    padding:0;
    margin:0;
    height:2.5em;
    width:100%;
    border:none;
    background-color:red;
}

#oben h1 {text-align:center; font-size:2em; line-height:2.5em; float:left; max-width:50%;} /*Titel der Seite*/

#oben p {text-align:center; font-weight:bold; font-size:1.5em; line-height:2.5em; float:right;} /*Untertitel der Seite*/

html Teil:

<div id="oben"><h1 name="oben">Titel der Seite</h1>
<p>Untertitel</p></div>

Doch leider funktioniert es nicht: fehler2.jpg

Es wird zwar beides links bzw. rechts gefloatet, doch es ist außerhalb des divs. Gut wäre es, wenn es so aussieht: so.jpg

Wie kann ich das ändern? (Die rote Hintergrundfarbe ist nur zum testen).

Gruß Muckel

[marX]

Du brauchst danach noch ein clearendes Element, da floatende Elemente aus dem normalen Fluß heruasgenommen werden. Daher wird das umschließende <div> nicht auf deren Höhe aufgezogen.

<br style="clear:both" />

[Muckel]

Moin,

ein Fehler habe ich schon gefunden, es war das text-align:center was noch drinne war. Doch jetzt wird es komisch an geziegt: fehler3.jpg

Wie bekomme ich diesen versatz weg und wie bekomme ich das ins rote div?

Gruß und Danke
Muckel

[Muckel]

Zitat von marX

Du brauchst danach noch ein clearendes Element, da floatende Elemente aus dem normalen Fluß heruasgenommen werden. Daher wird das umschließende <div> nicht auf deren Höhe aufgezogen.

<br style="clear:both" />

Das hat leider auch zu keinem Ergebnis geführt:

<div id="oben"><h1 name="oben">Titel der Seite</h1>
<p>Untertitel</p><br style="clear:both" /></div>

[Muckel]

Das mit der höhe ging jetzt (hatte noch ein height drin .). Doch ich habe ein versatz drin - würde gerne beide unten anordnen.

fehler4.jpg

Gruß Muckel

[marX]

Natürlich muss genügend Platz vorhnaden sein, dass die beiden auch nebeneinander passen. Sonst rutscht das eine unter das andere. Abstand nach oben geht mittels margin-top. Oder du nimmst einfach eine Tabelle mit 2 Spalten.

[Muckel]

Das Problem ist ja nicht die höhe - denn jene habe ich entfernt, so dass das ganze "dynamisch" ist. Leider ist es so, dass das h1 ja höher ist als das p Tag. Und das p Tag richtet sich nun an die obere Grenze des h1 und nicht, wie gewollt/gewünscht, an die untere.

Gruß und Danke
Muckel

[marX]

Ich weiß schon was dein Problem ist. Wie gesagt, am einfachsten wäre in deinem Fall die Verwendung einer 2spaltigen Tabelle, da nur dort vertical-align wie "erwartet" funktioniert. Ansonsten musst du versuchen bei <hX> und <p> mit height und line-height solange rumzuspielen, bis du auf vernünftige Werte kommst.

[Monika]

wenn was nach rechts fließt sollte es im Quelltext VOR dem Teil stehen, das nach Links fließt, dann sind die auf gleicher Höhe

lg

[Muckel]

Ist eine Tabelle noch valid bei so etwas und wie verhält sich das mit den Richtlinien zur Barriere freiheit?

Gruß Muckel