Startseite Skripte für das Wintersemester 2018/19 Webdesign DOM und Desktop-Layouts Floating Elements


Floating Elements

See the Pen floating_text by Matthias Edler-Golla (@megolla) on CodePen.

  • Es kann nach links oder nach rechts gefloatet werden
  • Das im Source-Code oben liegende Element floatet in das untere Element
  • Das gefloatete Element muss eine Breiten-Angabe haben!

HTML

<h2>Floating Headline Text</h2>
<p>Lorem ipsum no eam iudicabit patrioque, liberavisse signiferumque [...]</p>

CSS

h2 {
    color:#fff;
    background:red;
    padding:1.5em 0.3em;
    margin:0 10px 10px 0;

    /* floating-relevante Angaben */
    width:8em;
    float:left;
}

Demo

Schaut Euch die Demo und deren Source-Code an! Ändert dabei auch die Breite Eures Browser-Fensters…