Sebastian Menning: Problem mit Positionierung von Elementen

Hallo,

ich erstelle gerade meine erste Webseite, bei der das Layout komplett auf CSS
basiert. Leider habe ich mit der Positionierung ein kleines Problem.

Die Seite hat ein einfaches, zweispaltiges Layout. Ich habe mal eine kleine
Grafik zur Demonstration angefertigt:
http://www.animestation.de/bild01.png

Wie in dem Bild zu sehen ist, hätte ich gerne das der Text des dritten Absatzes
erst unter der kleinen Grafik beginnt.

Deshalb habe ich den dritten Absatz nun so formatiert:
<p style="clear:both;">

Dabei rutscht der Text des dritten Absatzes nun aber nicht nur unter die kleine
Grafik, sondern er wird unter den Buttons auf der linken Seite platziert.
Um das besser erklären zu können, habe ich dazu auch mal eine kleine
Grafik angefertigt:
http://www.animestation.de/bild02.png

Wie bekomme ich es nun hin, das der Text unter der kleinen Grafik beginnt,
und nicht erst unter den Buttons?

Vielen Dank schon mal für eure Hilfe.

Sebastian

  1. Sebastian,
    Noch auf oder schon auf?

    Dabei rutscht der Text des dritten Absatzes nun aber nicht nur unter die kleine
    Grafik, sondern er wird unter den Buttons auf der linken Seite platziert.

    „both: Die erzeugte Box wird an eine Position unterhalb ALLER [Hervorhebung von mir] Floating-Boxen früherer Elemente des Quelldokuments geschoben.“ [CSS2 §9.5.2]

    Wie bekomme ich es nun hin, das der Text unter der kleinen Grafik beginnt,
    und nicht erst unter den Buttons?

    Ohne clear. ;-)

    Indem du den Absatz, in welchem sich das Bild befindet, mindestens so hoch machst wie das Bild selbst (min-height).

    Für IE eine height-Angabe, diese aber vor anderen Browsern verstecken.

    Live long and prosper,
    Gunnar

    --
    „Weisheit ist nicht das Ergebnis der Schulbildung, sondern des lebenslangen Versuchs, sie zu erwerben.“ (Albert Einstein)
    1. Hi,

      „both: Die erzeugte Box wird an eine Position unterhalb ALLER [Hervorhebung von mir] Floating-Boxen früherer Elemente des Quelldokuments geschoben.“ [CSS2 §9.5.2]

      verlinke besser auf CSS 2.1, da hat sich nämlich die Spezifikation den Browserimplementierungen angepaßt - wie auch ich meine Seite Unterschiedliche Interpretation von 'clear' aktualisiert habe. ;-)

      freundliche Grüße
      Ingo