Because the target layout requires horizontal and vertical arrangements, we need to use extra regions to help organize the layout.
The overall box (that contains all the regions) can be divided into three major regions that are arranged vertically. In other words, we divide the whole web page into three major regions. The yellow, the green and the rest. In other words, we group the coral, white, lavender and gray into one big region. We’ll call this region “bottom”.
The “bottom” region is necessary as a container because none of the regions that it contains has the same width as the yellow or green regions. This makes it difficult to arrange those regions without using a container region (the “bottom” region).
In the “bottom” region, we separate it into the content bearing coral and the rest of it as another container region. Again, although this is not completely necessary, it helps to organize the white, lavender and gray regions. We’ll call this second container region “bottomright”.
Within the “bottomright” region, we divide it into the “bottomrighttop” region and the content bearing gray region. The “bottomrighttop” region is the container for the white and lavender region.
After all is said and done, the following reflects the containment of regions: