The content blocks coloured
This is 'col'
This page is for information only, to illustrate the structure of blocks that make up the web pages. 'col' is the default content column, the others are optional.
The #content div is light grey, max-width only (1240px) so reduces with screen width.
This text is in the default 'col' div (with a white background), max-width only (740px).
Temporarily end 'col'.
This text is in the #content div only, by putting a temporary break in 'col'. To do this, close 'col', write the content, then re-open 'col'. Remember to re-open 'col' immediately after. #content is essentially a container div for other blocks and is not intended for direct content. #wrap also exists as a wrapper for #content. You could theoretically close #content and 'col' at the top (in that order), put content in #wrap, then re-open 'col and #content at the bottom (in that order), but that seems stupid because the content in #wrap only would be as wide as the screen.
Start 'col' again.
div class w1200
This is div w1200. It has four widths depending on screen width: 1200px, 1024px, 860px, and 740px. Less than 740px switches to mobile styles.
section
This is the 'section' div in 'w1200' with a fixed width of 600px;
'col' continues ...
section
This is the 'section' div in 'col' with a fixed width of 600px;
'col' continues ...
Now end 'col' temporarily for 'flexcontainer1'.
flexcontainer1
Caption
Div class 'flexcontainer1'
This requires a temporary break in 'col'. Width is 'auto'.
It is designed for an image next to a text box on wider screens. The image can be left or right of the text box. This is done with the class 'row' or 'rowreverse'. Caption optional.
This image is actually 640px wide but shows as 600px wide on a wider screen. On narrower screens it expands to it's native 640px.
Start 'col' again.
The next block is 'flexcontainer2' with a pink background. It is designed to contain a series of white boxes as 'flexitems'. That is all. Dont' put anything else in because it won't work.
Now end 'col' temporarily for 'flexcontainer2'.
flexcontainer2
Start 'col' again.
Everything seems to work as long as the rules are followed.
See this page without background colours »