Wie aus selfhtml zitiert, sollen div's nicht an der von Dir angeregten Stelle stehen. Sie dienen eher als container, in dem wie in meinem Fall der Banner, die Liste und ein <p> reingepackt/gruppiert werden.
Des Weiteren soll lt. der selfhtml Vorgaben der <body> Text so angeordnet werden, wie die logische Reihenfolge ist und wie der logische Zusammenhang ist. Denn wenn z. B. das css in einer externen Datei ist und diese nicht geladen werden kann, dann muss der ungestaltete Text dennoch Sinn ergeben.
Deswegen habe ich mich für neun mal:
<ul>
<li class="de">
<h2>..</h2>
<p>..</p>
<p>..</p>
</li>
<li class="mid">
<p><span class="mid">..</span></p>
<h2><span class="mid">..</span></h2>
<p><span class="mid">..</span></p>
</li>
<li class="en">
<h2>..</h2>
<p>..</p>
<p>..</p>
</li>
</ul>
entschieden und poste den Quelltext quasi als Änderungshistorie, da ich die Änderungen nicht archiviere und unsere Unterhaltung für andere Nutzerinnen und Nutzer nachvollziehbar bleibe.
li de und li en haben eine prozentuale width. li mid hat keine width, so dass sie als Puffer dient. So klappt es jetzt auch auf der kleinsten Zoomstufe des IE. Alles bleibt da, wo es zu erscheinen angedacht ist. Leider steht nun der Text von li mid nicht mehr mittig zwischen li de und li en, weil li mid nur so breit ist, wie der darin enthaltene Text.
Final benötige ich also eine Lösung, wie li mid den gesamten auf der jeweiligen Zoomstufe zur Verfügung stehenden Platz zwischen dem links floatenden und dem rechts floatendem li von sich ausnutzt.