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 Grünschnabel

    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.  
    2.         <div style="width:300px;height:300px; border-style: dashed;border-width: 1px;border-color: black">
    3.             <div style="width:100px;height:100px; border-style: dotted;border-width: 1px;border-color: blue; float:left;"></div>
    4.                  text text text.....
    5.            
    6.         </div>
    7.  
    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.  
    2.         <div style="width:300px;height:300px; border-style: dashed;border-width: 1px;border-color: black">
    3.             <div style="position: relative; top: 200px; width:100px;height:100px; border-style: dotted;border-width: 1px;border-color: blue; float:left;"></div>
    4.                  text text text.....
    5.            
    6.         </div>
    7.  
    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

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

    Mein Fazit: "Mission impossible".

Diese Seite empfehlen