Mit Hilfe von float kann die Ausrichtung von Elementen geschehen. Normalerweise ist die Reihenfolge untereinander, mit Hilfe von float geht das aber auch nebeneinander.

Speichere diese Dateien in einem gemeinsamen Ordner ab und öffne die Datei bilderreihe.html.

• Download: opel.jpg
• Download: bilderreihe.html
• Download: layout.css

Mit Hilfe von margin-left (Abstand vom linken Bildrand) können die Kästchen verschoben werden. margin ist also der Außenabstand von Elementen auf dem Bildschirm.

Mit padding kann man den Innenabstand von Texten oder Bildern innerhalb eines Blocks festlegen.

• Download: div.html
• Download: design.css

1. Erstelle folgende Elemente in einer Seite
   
2. Füge zusätzlich ein Bild ein, welches unterhalb des Textes steht.

Man kann Elemente relativ und absolut zueinander setzen, aber auch an einem bestimmten Ort fixieren. Das abschließende Beispiel soll dies verdeutlichen. Wer diese Elemente sicher verwenden möchte, sollte sich letzlich aber intensiver mit dem Thema auseinandersetzen.

• Beispiel stammt aus http://de.selfhtml.org
• Download: html_css_positionierung.html

=> Abschlussübung HTML
=> Übersicht HTML und CSS