Hier könnten Links stehen

Das ist #div1.

Hier könnte eine Überschrift stehen ...

Das ist #div3. Im HTML-Code steht er an zweiter Stelle.

Hier könnte etwas Text stehen ...

Das ist #div2. Im HTML-Code steht er an dritter Stelle.

Für Sie der Code der drei <div>-Elemente, die im <head> im <style>-Abschnitt definiert werden

<style>

body {color:black; background:white; margin:0; padding:0;}

float:left;
margin-top:30px;
margin-left:10px;
margin-right:10px;
width:100px;
background:red;
}

#div2 {
margin-top:5px;
width:80%;
background:darkblue;
}

#div3 {
margin-top:5px;
width:80%;
background:cornflowerblue;
}

</style>

Wenn Sie sich den Code genau ansehen, merken Sie, dass er kürzer ist als bei absoluter Positionierung. Man kann ihn sogar noch verkürzen, indem man die Angaben zum margin-Attribut zusammenfasst. Statt für jede Angabe eine Zeile zu benutzen, kann man schreiben: margin:30px 0px 10px 0px, wobei sich die Angaben auf top, right, bottom, left - also oben, rechts, unten, links - beziehen.

Der Vorteil bei dieser Art der Positionierung ist, dass man eventuellen Schwierigkeiten bei der absoluten Positionierung (Bildschirmgröße, Auflösung usw.) aus dem Wege geht, da die nicht absoluten Angaben von Browsern relativ dynamisch interpretiert werden.

Prüfen Sie aber mit verschiedenen Browsern, ob die Darstellung korrekt ist - Firefox, Netscape 7.1 und Opera 8.5 interpretieren das float:left; nur für den Text in den <div>-Elementen, nicht aber für die <div>-Elemente selbst. Man könnte denken, dass sei ein hübscher Effekt, aber der Internet Explorer stellt die Elemente anders dar.

Um in allen Browsern das mehr oder weniger gleiche Aussehen zu erreichen, muss der linke Rand für #div2 und #div3 explizit definiert werden. Sehen Sie sich dazu das Beispiel 6 mit unterschiedlichen Browsern an.