Mit der zweiten Box meinst du vermutlich div#main-box ?
Wenn man ältere Browser-Versionen außer acht lassen will, könnte man die Boxen statt mit
float in einer Flexbox anordnen:
https://wiki.selfhtml.org/wiki/CSS/Eigenschaften/Flexbox
... und hierbei die Flex-Items mit "align-content: stretch" strecken:
https://wiki.selfhtml.org/wiki/CSS/Eigenschaften/Flexbox/Achsen#align-content
Ich habe allerdings die Erfahrung gemacht, dass der IE11 bei horizontal angeordneten Flex-Items etwas buggy ist.
Möchte man ältere Browser berücksichtigen oder haut die Umsetzung mit dem IE 11 nicht hin, könnte man die Hintergründe der beiden (floatenden) Boxen alternativ auch über eine Hintergrundgrafik des Eltern-Containers erzeugen. Die Grafik ist 1px hoch und 776px breit. Die ersten 210px haben die Farbe #dcdcdc, die folgenden 20px #d1d1d1 und der Rest dann wieder #dcdcdc. Wenn der Eltern-Container ein "overflow: auto" hat, wird die Grafik bis nach unten durchgezogen und erzeugt die Illusion, dass sie die Hintergründe der beiden Kind-Boxen anzeigt