Nach bestimmten Elementen (wie etwa einem Bild oder einer Liste), macht der Internet Explorer automatisch einen Umbruch.
Beispiel:
<img src=“bild.jpg“ /> Text
Bei diesem Code würde der Text im Mozilla Firefox rechts neben dem Bild stehen. Der Internet Explorer hingegen würde nach dem Bild einen Umbruch machen und den Text darunter schreiben. Um solche Effekte zu verhindern, helfen in diesem Fall drei Div Container. Jeweils einer für das Bild und den Text mit der Eigenschaft float: left und dann noch einer, der den Textumfluss mit clear:left wieder zurücksetzt.
<div style=“float:left“><img src=“bild.jpg“ /></div>
<div style=“float:left“>Text<img src=“bild.jpg“ /></div>
<div style=“clear:left“></div>
Bei einer Liste würde das nicht gehen. Dort müsste man mit der Eigenschaft display: inline arbeiten, um mehrere Listen nebeneinander zu bekommen.
Beispiel:
<ul style=“display:inline“>
<li>Listenelement von Liste 1</i>
</ul>
<ul style=“display:inline“>
<li>Listenelement von Liste 2</i>
</ul>
<ul style=“display:inline“>
<li>Listenelement von Liste 3</i>
</ul>