1. Diese Seite verwendet Cookies. Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies. Weitere Informationen

float + relative position?

Dieses Thema im Forum "CSS" wurde erstellt von Catscrash, 20. März 2012.

  1. Catscrash

    Catscrash Mitglied

    Hi,

    mein Wunsch-Ergebnis ist am einfachsten mit einem Bild zu zeigen div_problem1.png

    Der blaue Kasten soll auf jeden Fall unten links liegen, der Text soll oben links anfangen und - falls zu lang - um den blauen Kasten floaten. Allerdings habe ich Probleme das zu erreichen.

    Der folgende Ausschnitt funktioniert bezüglich des floats soweit gut, hat aber den blauen Kasten natürlich oben links.
    HTML:
    1.         <div style="width:300px;height:300px; border-style: dashed;border-width: 1px;border-color: black">
    2.             <div style="width:100px;height:100px; border-style: dotted;border-width: 1px;border-color: blue; float:left;"></div>
    3.                  text text text.....
    4.            
    5.         </div>
    probiere ich jetzt diesen nach unten zu verschieben, landet zwar der blaue Kasten unten, der float-Ausschnitt aus dem Text ist jedoch weiterhin oben:
    HTML:
    1.         <div style="width:300px;height:300px; border-style: dashed;border-width: 1px;border-color: black">
    2.             <div style="position: relative; top: 200px; width:100px;height:100px; border-style: dotted;border-width: 1px;border-color: blue; float:left;"></div>
    3.                  text text text.....
    4.            
    5.         </div>
    div_problem2.png

    Wenn ich es mit absoluter Positionierung versuche, funktioniert float natürlich gar nicht mehr, logisch.

    Irgendjemand eine Idee?

    Danke!

    Catscrash
     
  2. SpiceLab

    SpiceLab ZENmechanic Premium-User

    Hab da mal ein wenig mit margin (Außenabstand) experimentiert, bin aber zu keinem zufriedenstellenden Resultat gekommen.

    Mein Fazit: "Mission impossible".