These custom block level elements allow for considerable variety in content presentation. Sidebars allow ancillary or background information to be presented without interrupting the flow of the main text. Imageboxes allow titled pictures and graphics to intersperse and liven the text. Crossbars allow highlights and announcements. Bicolumns allow very compact presentation of information.
On this page:
Sidebars
Sidebars provide the opportunity to present related information without interrupting the main flow of the text.
You have to pay a little bit of attention to how crowded the screen gets, as the wide left and wide right sidebars can overlap if they're too close to each other. Sometimes the browser can get a bit confused if sidebars bump into each other. It usually helps to stagger sidebars, imageboxes, and images to the left and right.
To force sidebars to stack vertically if they are close to each other, add the "clear-left" or "clear-right" class modifiers as appropriate (see HTML pattern).
The non-floating block level element immediately following the floating sidebars in the HTML code provides the "anchor" for the sidebar. The top of the block level element following the sidebar becomes the top of the floating sidebar.
Menucolumn sidebar
We have defined a special sidebar to sit underneath the menu of the standard page menu in the left column. To install this sidebar, find these comments in the HTML source code:
<!-- ----[Custodian]----: add sidebar-menucolumn elements here -->
<!-- End of ----[Custodian]---- add sidebar-menucolumn elements -->
... and add the sidebar (one or more) between the comments.
Dufferin Grove Park
Skating
Imageboxes
Imageboxes left and right
We have defined imageboxes to contain titled and narrated pictures. The simplest form is to specify an imagebox-left or imagebox-right with an upper and/or lower title that is shorter than the width of the picture, as the example to the right.
If the text of the titles or narrative is longer than the width of the picture, then the text pushes the borders of the box out, as in the example below.
Here is a picture of skating at the park
This appears underneath
You can have a narrative, but the text pushes the width of the box.
The way to correct this problem is to specify a width for the imagebox. This will constrain the borders of the imagebox, and force the text to wrap as desired.
Here is a picture of skating at the park
This appears underneath
You can have a narrative to go with the picture, and the text now wraps correctly.
Note that text in imageboxes is centred.
This is the only situation in which we have to step outside the class attribute to achieve styling results. To specify the width, use the style attribute of the imagebox div (see HTML pattern below), and assign it a value in the form style="width:nnnpx", where nnn is the number of pixels for the width of the imagebox. For cross-browser compatibility (they count widths differently), we have found that adding 16 pixels (8 per side) over the width of the enclosed image (to account for the border of the image and the borders of the imagebox, as well as some space), works well. In this case the image has a width of 160px, so we have assigned a width of 176px to the imagebox.
As with sidebars, the non-floating block level element after the imagebox declaration in the HTML source code provides an anchor for the top of the imagebox.
Stacking imageboxes
To stack imageboxes horizontally, declare them for the same side one after another in the HTML source code. They will stack horizontally, and behave as liquid content, which is to say they will wrap as necessary in response to the width of the browser window. Try adjusting the width of your browser for the following four left imageboxes:
Dufferin Grove Park
Skating
Dufferin Grove Park
Skating
Dufferin Grove Park
Skating
Dufferin Grove Park
Skating
To control the grouping, you can place a block divider (<div class="block-divider"></div>) between groups. In the example below, we have placed a block divider after the second imagebox.
Dufferin Grove Park
Skating
Dufferin Grove Park
Skating
Dufferin Grove Park
Skating
Dufferin Grove Park
Skating
Dufferin Grove Park
Skating
Dufferin Grove Park
Skating
Dufferin Grove Park
Skating
To stack images vertically, declare them one after another in the HTML source code, and add a "clear-left" or "clear-right" modifier to their class attributes (similar to sidebars). The three images to the right were declared with <div class="imagebox-right clear-right"> above this paragraph in the source code.
Using this method, other elements of the page, notably text, will continue to flow naturally around the stacked imageboxes.
Centered imagebox
Finally, we have defined a centered imagebox: "imagebox-block-center". The first version of this - the spanning imagebox - is straightforward:
Here is a picture of skating at the park
This appears underneath
Here is the imagebox spanning the page, centered...
If you want the box around the image to collapse closely around the image, then it is more complicated. First, the imagebox must be given a width to cause the border to collapse around the image. This is similar to the left and right imageboxes that need to be constrained to force wrapping of text. In addition, however, this element requires special attention to accomodate cross-browser incompatibilities. For most browsers, the centering of a block element is handled through internal style rules (margin:auto) specified in the CSS (cascading style sheet). Internet Explorer however does not interpret these rules correctly. To accomodate Internet Exporer, we must "wrap" the centered imagebox in a generic div with a text-centering rule. On the other hand other browsers do not recognize text centering as a legitimate way of centering a block (correctly), so both methods are required.
Here is a picture of skating at the park
This appears underneath
Here is the imagebox centered on the page...
Note that text and other material cannot flow around centered imageboxes (hence the term "block" included in the name).
Imagebox clusters
You can also center a cluster of imageboxes, such as the cluster of four imageboxes from above. However this is a bit tricky, involving some arithmetic and stepping into the swamp of cross-browser compatibility issues.
Dufferin Grove Park
Imagebox 1
Dufferin Grove Park
Imagebox 2
Dufferin Grove Park
Imagebox 3
Dufferin Grove Park
Imagebox 4
Outer Imagebox
We have defined all imageboxes to have padding of 3px on all sides. Imagebox-left has margins of 4px defined for the right and bottom, and imagebox-right has 4px margins defined for the left and bottom - these margins are there to provide space between the imageboxes and text flowing around them. Bordered images themselves have 2px borders around them. All these need to be taken into account in assembling the box cluster. The other problem is that Internet Explorer includes padding and borders in its width calculations (incorrectly by w3.org standards), whereas the other browsers calculate width inside the padding and borders. Additionally, Internet Explorer requires the block-divider at the beginning, between and after the two horizontal sets of images to properly calculate the vertical scope of the outer imagebox. To accomodate these factors, we take the following steps:
Using class modifiers, we remove the right margins from imageboxes 2 and 4, and the bottom margins from imageboxes 3 and 4. We place a generic div around the outer imagebox as a "size wrapper". Since this generic div has no border or padding, all browsers will apply the same logic to calculating its width. The size wrapper will correctly constrain the size of the outer imagebox. We add the class modifier "margin-vertical-auto" to the size wrapper so that it will center correctly in non Internet Explorer browsers.
Having made the margin adjustments, we calculate the width required of the size wrapper as follows: Outer imagebox: borders: 1+1=2; padding: 3+3=6. Inner imageboxes: images: 160+160=320; image borders: 2*(2+2)=8; imagebox borders: 2*(1+1)=4; padding: 2*(3+3)=12. Left inner imagebox right margin: 4px. Total is 356px. We apply this width to the size wrapper.
This imagebox cluster renders correctly in both Internet Explorer and other browsers. If you have need of such a specialized layout, copy the following HTML pattern and modify it to suit your needs.
If you don't want any decoration around an image (such as titles, narrative, and a second layer of border), use an inline image instead (see Inline elements).
Bicolumns
Bicolumns provide the opportunity to present condensed information to the reader in a format that is easily scanned by eye. They are two independent side-by side columns, though we designed them to be used together, side-by-side. We place a block-divider above and below the bicolumns to protect the area from encrouchment (and reduce confusion of browsers). We also enclose the bicolumns in a division-compact to achieve a more compact font. Each column can be thought of as a mini-page.
Left column heading
This is the left bicolumn.
Right column heading
This is the right bicolumn.