> <section> > <table class="table"> > </table> > <br style="clear:both;"> > </div> Jetzt mal abgesehen davon, dass dir am Ende ein </div> statt des </section> rausgerutscht ist: <section> (oder sonst ein klammerndes Element) ist für das Problem bzw. dessen Lösung überflüssig, ebenso <br> bzw. das enthaltene clear. Nicht nur überflüssig, sondern schon als kurios würde ich <table class="table"> bezeichnen. Du brauchst in diesem Beispiel keinen Klassenbezeichner (weil keine anderen Tabellen da sind), benennst ihn dann aber auch noch nach dem Element selbst. > .table { > display: inline-block; > width:45%; > text-align: left; > } text-align und width sind ebenfalls überflüssig. Worauf ich hinaus will: Deine Problemlösung könnte eigentlich aus der einzelnen Zeile mit display:inline-block bestehen. Leider verschleierst du das mit dem ganzen Budenzauber drumherum. Und dann muss ich dummerweise anfügen, dass display:inline-block bei einem Tabellenelement in die Hose gehen dürfte, da diese ihren eigenen display-Wert table haben. Vermutlich muss stattdessen jede Tabelle einzeln in ein <div> gekapselt und diesen dann jeweils display:inline-block verpasst werden.

> <section> > <table class="table"> > </table> > <br style="clear:both;"> > </div> Jetzt mal abgesehen davon, dass dir am Ende ein </div> statt des </section> rausgerutscht ist: <section> (oder sonst ein klammerndes Element) ist für das Problem bzw. dessen Lösung überflüssig, ebenso <br> bzw. das enthaltene clear. Nicht nur überflüssig, sondern schon als kurios würde ich <table class="table"> bezeichnen. Du brauchst in diesem Beispiel keinen Klassenbezeichner (weil keine anderen Tabellen da sind), benennst ihn dann aber auch noch nach dem Element selbst. > .table { > display: inline-block; > width:45%; > text-align: left; > } text-align und width sind ebenfalls überflüssig. Worauf ich hinaus will: Deine Problemlösung könnte eigentlich aus der einzelnen Zeile mit display:inline-block bestehen. Leider verschleierst du das mit dem ganzen Budenzauber drumherum. Und dann muss ich dummerweise anfügen, dass display:inline-block bei einem Tabellenelement in die Hose gehen dürfte. Diese haben ihren eigenen display-Wert table. Vermutlich muss stattdessen jede Tabelle einzeln in ein <div> gekapselt und diesen dann jeweils display:inline-block verpasst werden.

> <section> > <table class="table"> > </table> > <br style="clear:both;"> > </div> Jetzt mal abgesehen davon, dass dir am Ende ein </div> statt des </section> rausgerutscht ist: <section> (oder sonst ein klammerndes Element) ist für das Problem bzw. dessen Lösung überflüssig, ebenso <br> bzw. das enthaltene clear. Nicht nur überflüssig, sondern schon als kurios würde ich <table class="table"> bezeichnen. Du brauchst in diesem Beispiel keinen Klassenbezeichner (weil keine anderen Tabellen da sind), benennst ihn dann aber auch noch nach dem Element selbst. > .table { > display: inline-block; > width:45%; > text-align: left; > } text-align und width sind ebenfalls überflüssig. Worauf ich hinaus will: Deine Problemlösung könnte eigentlich aus der einzelnen Zeile mit display:inline-block bestehen. Leider verschleierst du das mit dem ganzen Budenzauber drumherum.