DIV Elemente nebeneinander mit Float:left und das zerschossene Webseitenlayout

Wieder ein interessantes Verhalten bei der Interpretation von HTML durch Webbrowser.
DIV Elemente werden per se als sog. Block-Elemente behandelt, was bedeutet, dass auf ein DIV Element - es sei denn es ist absolut positioniert - ein Zeilenumbruch folgt. Nun möchte ich aber mehrer DIV Elemente nebeneinander anzeigen. Mit der CSS Eigenschaft "float" und dem Parameter "left" funktioniert das auch soweit, dass Elemente - sofern der Platz ausreicht - nebeneinander angereiht werden.

Allerdings führt dies dazu, dass das übergeordnete Element, welches das Layout meiner Webseite beeinhaltet unerwarteterweise nicht mitwächst. Im Endeffekt ragen die nun nebeneinander positionierten DIV Elemente nun über das Layout hinaus und das ganze sieht eher bescheiden aus.

Des Rätsels Lösung findet sich dann in folgendem
Foren Post von Webdeveloper.org aus dem Jahr 2005

overflow: hidden; /* for standards compliant browsers */
width: 100%; /* for IE */

"Overflow:hidden" ist eigentlich dazu gedacht, dafür zu sorgen, dass Inhalte, welche über die vorgegebene Größe eines DIV-Elements hinausgehen nicht - wie wie standardmäßig definiert - herausragen sondern, abgeschnitten werden.
Wie auch immer es sorgt auch dafür, dass das übergeordnete Element nun trotz "float:left" korrent mitwächst und damit ragen meine DIV-Elemente nun nicht mehr über das Seitenlayout hinaus.