<!DOCTYPE HTML>
<html>
<head>
<title>Testseite</title>
</head>
<!-- Das text-align wird für den IE bis v.8 gebraucht, da dieser "margin: 0 auto;" nicht versteht -->
<body style="text-align: center;">
<!-- Ein meist Wrapper genanntes Element, dass eine Anzahl anderer Elemente gruppiert, die eine gemeinsame Aufgabe erfüllen sollen. margin: 0 auto; bewirkt bei allen Browsern, außer dem IE bis v.8, eine Mittigstellung des Wrappers -->
<div style="width: 65%; margin: 0 auto;">
<p style="background-color: red; margin: 0;">
Ich bin ein P-Tag. Als Blockelemet, dass ich nunmal bin, brauche ich einen Inhalt, der mich in Form bringt oder eine Höhenangabe, damit ich nicht Unsichtbar bin.
Ich habe die automatische Breite von 100% meines übergeordneten Elementes, welches 65% des verfügbaren Viewports entspricht und habe außerdem, zur Unterscheidung von den beiden kleinen unter mir, die Farbe Rot.
</p>
<p style="float: left; width: 50%; background-color: yellow; margin: 0">
Ich bin ein auch ein links gefloateter P-Tag. Als Blockelemet, dass ich nunmal bin, brauche ich einen Inhalt, der mich in Form bringt oder eine Höhenangabe, damit ich nicht Unsichtbar bin.
Ich nutze, dank meines Schöpfers, 50% der Breite meines übergeordneten Elementes und habe außerdem, zur Unterscheidung von meinen beiden Kollegen, die Farbe Gelb.
</p>
<!-- Dieser Block hat 0,01% weniger Breite als sein Nachbar.
Ebenfalls eine IE-Maßnahme, da dieser es gerne schafft, dass 2x50% mehr als 100% sind.
In der Folge verschiebt sich die Darstellung.
Technisch gesehen ist "float: right;" hier garnicht zwingend nötig, da automatisch der verbleibende Platz, abzüglich der 50% des links gefloateten Elementes genutzt wird-->
<p style="float: right; width: 49.99%; background-color: green; margin: 0">
Ich bin ein rechts gefloateter ein P-Tag. Als Blockelemet, dass ich nunmal bin, brauche ich einen Inhalt, der mich in Form bringt oder eine Höhenangabe, damit ich nicht Unsichtbar bin.
Ich nutze, dank meines Schöpfers, 49,99% der Breite meines übergeordneten Elementes und habe außerdem, zur Unterscheidung von meinen beiden Kollegen, die Farbe Grün.
</p>
<!-- Das nachfolgende Break-Element beendet beide Umflüsse.
Diese können, alternativ zu both, auch einzeln mit left oder right gecleared werden -->
<br style="clear: both;">
</div>
</body>
</html>