Probleme mit Float-Layout
Franky
- css
Hallo =/
Prolog: ich bin gerade etwas verzweifelt und hoffe ihr könnt mir helfen...
Ich habe folgende HTML Vorgabe:
<div>
<h2><a href="/">Überschrift</a></h2>
<span>Autor, Datum</span>
<div>Inhalt, Inhalt, Inhalt, ...</div>
<div>Sonstiges</div>
</div>
Und möchte erreichen, dass das ganze am Ende so aussieht: http://www11.file-upload.net/11.09.09/6ute2ihrhyhm.png
Wichtig ist, dass <span> mit Autor und Datum von der Höhe her kleiner ist als das <h2> der Überschrift. Die Höhe kann sich auch verändern, daher muss ich meinen Code flexibel schreiben, sodass er ohne manuelle Änderungen auskommt.
Um das also zu schaffen habe ich <h2> eine Breite von 70% zugewiesen und mit float:left; auf die linke Seite gepackt. Danach habe ich das <span> zu einem block-Element gemacht und nach rechts gefloatet. Das Problem dabei ist, dass der Inhalt dann bereits rechts oben direkt unter "Autor, Datum" beginnt, weil das <h2> mit der Überschrift eine größere Höhe hat und somit noch eine halbe Zeile neben der Überschrift Platz ist, den "Autor, Datum" augrund der geringen Höhe nicht ausfüllt.
Wenn ich hingegen das "float:left" für das <h2> weglasse, fängt der Inhalt auch erst da an, wo ich möchte, aber dann ist das <span> mit Autor und Datum nicht ganz oben, sondern hat vom umschließenden <div> einen Abstand. Ich könnte es nun theoretisch mit einem negativen margin nach oben verschieben, aber wie gesagt, die Größen können sich alle ändern, deswegen geht das nicht.
Mittlerweile bin ich etwas ratlos... fällt euch vielleicht eine Lösung ein?
Viele Grüße,
Franky
Hi,
Das Problem dabei ist, dass der Inhalt dann bereits rechts oben direkt unter "Autor, Datum" beginnt, weil das <h2> mit der Überschrift eine größere Höhe hat und somit noch eine halbe Zeile neben der Überschrift Platz ist, den "Autor, Datum" augrund der geringen Höhe nicht ausfüllt.
Dann möchtest du den Inhalt vielleicht mit clear dazu bringen, erst unterhalb vorhergehender floats zu beginnen.
MfG ChrisB
Hallo Chris,
Dann möchtest du den Inhalt vielleicht mit clear dazu bringen, erst unterhalb vorhergehender floats zu beginnen.
Danke, clear war das Stichwort, das ich gesucht habe!