nebeneinanderstehende DIV´stehen nicht nebeneinander

[Rolf b]

width: calc(100% - 200px) reicht nicht; man muss gefloatete Elemente vor den nicht gefloateten angeben, sonst stellen sie sich nicht daneben.

Zweitens solltest Du dem #article div die Eigenschaft overflow:auto geben. Damit erreichst Du einen Blockformatierungs-Kontext und verhinderst, dass bei einem zu kurzen Artikel das float unten heraushängt.

Drittens ist die table-Formatierung im Hauptteil des Artikels nicht mehr state-of-the-art und auch gar nicht nötig, das kannst Du ganz normal mit einem div (äh, eher einer section) einrahmen und darin h2 und p untereinander setzen.

Viertens gibst Du die Breite des Hauptteils nicht mit 80% an, sondern durch einen calc Ausdruck, in dem Du die Breite des Seitenblocks von 100% abziehst. Die Leerstellen um das Minus sind obligatorisch!

Fünftens sollte dein #article div kein float bekommen, es floatet nicht sondern ist auf voller Breite.

Sechstens lässt sich dein Aside-Konstrukt vermutlich mit einer Flexbox eleganter lösen…

Siebtens - wenn Du schon <main> benutzt, dann gerne auch <header>, <section> und <aside> statt der diveritis von HTML 4.

Rolf