CSS Bild nach 'float:none' unsichtbar

  • Guten Abend!

    Dies ist mein erster Beitrag auf dem Forum, da ich auch erst mit HTML angefangen habe. :)

    Naja, mein Problem ist folgendes: Ich habe eine Website, die sich auf Handys anpassen soll. Dabei habe ich drei Bilder bzw. Links und Text (siehe JSFiddle für Verständnis), die nebeneinander sind. Das mache ich natürlich mit float: left.
    Wenn die Website nun allerdings auf einem Gerät aufgerufen wird, dessen Displayweite kleiner als 1200px ist, sollen sie untereinander sein. Das müsste doch mit float:none gehen oder?

    Ich poste hier den wichtigen Quelltext, ein Link zu einem Life-Beispiel mithilfe von jsfiddle folgt:

    HTML-Datei:

    Css-Datei:

    JSFiddle:
    http://jsfiddle.net/FERNman/bqmrq2mh/

    Verstehe nicht, warum es nicht geht bzw. die Größe des BigImage divs automatisch auf auto und somit auf 0x0 Pixel gesetzt wird. Achja, und kann mir bitte jemand sagen, warum der <p> Bereich die Opacity von .BigImageOver übernimmt?

    Hoffe ihr könnt mir helfen,

    MFG und Danke im Voraus!
    FERNman

    Einmal editiert, zuletzt von FERNman (14. Januar 2015 um 19:21)