Web pages are often divided into "rows" with different background colors. Further, different rows may contain columns of different proportions. Yet further, the columns often contain other block structures. All the columns so far in this lesson have contained only text.

This example puts these ideas together so that you can start see how versatile columns are in Web pages. If you surf to most any popular Web page, perhaps after this lesson you will notice how prevalent the use of columns is!

This row is a full-width stripe. The stripe is just a default div block (plus background color), hence expands to 100% width across the page canvas.

Inside that is a centered wrapper, which is a child block of the div that creates the full-width stripe.
The columns are inside the centered wrapper. The column blocks are exactly like in the previous examples, except that there are only 3 of them of equal proportions.
There are comments in the CSS source code about these columns. Also, at the top of the internal style sheet, there is some CSS code to turn on borders for all the blocks. That will help you to visualize what's going on here. The blocks used to create this row are nested 3 deep.

For contrast, this row is just a centered wrapper that contains 4 columns (no full-width stripe).
It is very common for pages to switch column-proportionality in different rows or sections of the page. If you surf to some commercial pages, you will likely see that.
But obviously, most pages don't just include text in the column displays. All sorts of different display boxes are often included into columns. The columns in the last row below contains some examples from the lesson on styling blocks.
The column rows in this page might seem a bit random , but it won't be long before we put all these ideas together and create full-page layouts that look like contemporary Web pages.

Display Box Caption
This blocks inside these columns use the EXACT same styles (except maybe color) as the full-page-width versions shown in a previous lesson.
Flying Saucer Banner
Display Box Caption
But in this case, the colums are determining the widths of the blocks, rather than the full page canvas.