div css: layout three (more) sections in one row_html/css_WEB-ITnose

Recently, a friend asked: How can I use divs to implement three sections on my webpage?
The following is a brief description of the div layout of the three sections:

The idea is: 1. First define the red DIV "1" in the picture.

2. Then in Set two green DIV "2" in the red frame (define the two green DIVs with CSS, one on the left and one on the right---CSS: float:left; float:right;).

3 .Then put two blue DIV "3" in the green DIV on the right (define the two blue DIVs with CSS, one on the left and one on the right---CSS: float:left; float:right;).
In the same way, if there are more sections, just use the same layer-by-layer nesting method!