friends of dufferin grove park
Website - Technical - Custom Block Level Elements

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.

HTML pattern: left sidebar
<div class="sidebar-left-narrow">
 <h6 class="heading-emphatic">
   Left Narrow Sidebar</h6>
 <p class="compact">
   Here is a left narrow sidebar...</p>
</div>
<p>Next block level element acts
  as anchor</p>

<div class="sidebar-left-medium">
 <h6 class="heading-emphatic">
   Left Medium Sidebar</h6>
 <p class="compact">
   Here is a left medium sidebar...</p>
</div>

<div class="sidebar-left-wide">
 <h6 class="heading-emphatic">
   Left Wide Sidebar</h6>
 <p class="compact">
   Here's a wide one to the left...</p>
</div>
... with clear-left
<div class="sidebar-left-narrow clear-left">
 <h6 class="heading-emphatic">
   Left Narrow Sidebar</h6>
 <p class="compact">
   Here is a left narrow sidebar...</p>
</div>
HTML pattern: right sidebar
<div class="sidebar-right-narrow">
 <h6 class="heading-emphatic">
   Right Narrow Sidebar</h6>
 <p class="compact">
   Here is a right narrow sidebar...</p>
</div>
<p>Next block level element acts
  as anchor</p>

<div class="sidebar-right-medium">
 <h6 class="heading-emphatic">
   Right Medium Sidebar</h6>
 <p class="compact">
   Here is a Right medium sidebar...</p>
</div>

<div class="sidebar-right-wide">
 <h6 class="heading-emphatic">
   Right Wide Sidebar</h6>
 <p class="compact">
   Here's a wide one to the right...</p>
</div>
... with clear-right
<div class="sidebar-right-narrow clear-right">
 <h6 class="heading-emphatic">
   Right Narrow Sidebar</h6>
 <p class="compact">
   Here is a right narrow sidebar...</p>
</div>
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.

HTML pattern: menucolumn sidebar
  <!-- ----[Custodian]----: add sidebar-menucolumn elements here -->
  <div class="sidebar-menucolumn">
   <h6 class="heading-emphatic">Menucolumn sidebar</h6>
   <p class="compact">This is a menucolumn sidebar</p>
  </div>  
  <!-- End of ----[Custodian]---- add sidebar-menucolumn elements -->
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.

HTML pattern: imagebox-left, imagebox-right
<div class="imagebox-left">
 <h6 class="heading-dark">Dufferin Grove Park</h6>
 <img class="image-bordered" src="photos/DufferinRink_tm.jpg" alt="">
 <h6 class="heading-dark">Skating</h6>
</div>

<div class="imagebox-right">
 <h6 class="heading-dark">Dufferin Grove Park</h6>
 <img class="image-bordered" src="photos/DufferinRink_tm.jpg" alt="">
 <h6 class="heading-dark">Skating</h6>
</div>

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.

HTML pattern: imagebox, constrained by width
<div class="imagebox-left" style="width:176px">
 <h6 class="heading-dark">Here is a picture of skating at the park</h6>
 <img class="image-bordered" src="photos/DufferinRink_tm.jpg" alt="">
 <h6 class="heading-dark">This appears underneath</h6>
 <p class="compact"> You can have a narrative to go with the picture, and 
   the text now wraps correctly.</p> 
</div>
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
HTML pattern: horizontal imagebox stack
<div class="imagebox-left">
 <h6 class="heading-dark">Dufferin Grove Park</h6>
 <img class="image-bordered" src="photos/DufferinRink_tm.jpg" alt="">
 <h6 class="heading-dark">Skating</h6>
</div>

<div class="imagebox-left">
 <h6 class="heading-dark">Dufferin Grove Park</h6>
 <img class="image-bordered" src="photos/DufferinRink_tm.jpg" alt="">
 <h6 class="heading-dark">Skating</h6>
</div>

<div class="imagebox-left">
 <h6 class="heading-dark">Dufferin Grove Park</h6>
 <img class="image-bordered" src="photos/DufferinRink_tm.jpg" alt="">
 <h6 class="heading-dark">Skating</h6>
</div>

<div class="imagebox-left">
 <h6 class="heading-dark">Dufferin Grove Park</h6>
 <img class="image-bordered" src="photos/DufferinRink_tm.jpg" alt="">
 <h6 class="heading-dark">Skating</h6>
</div>

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
HTML pattern: grouping horizontal imagebox stacks
<div class="imagebox-left">
 <h6 class="heading-dark">Dufferin Grove Park</h6>
 <img class="image-bordered" src="photos/DufferinRink_tm.jpg" alt="">
 <h6 class="heading-dark">Skating</h6>
</div>

<div class="imagebox-left">
 <h6 class="heading-dark">Dufferin Grove Park</h6>
 <img class="image-bordered" src="photos/DufferinRink_tm.jpg" alt="">
 <h6 class="heading-dark">Skating</h6>
</div>

<div class="block-divider"></div>

<div class="imagebox-left">
 <h6 class="heading-dark">Dufferin Grove Park</h6>
 <img class="image-bordered" src="photos/DufferinRink_tm.jpg" alt="">
 <h6 class="heading-dark">Skating</h6>
</div>

<div class="imagebox-left">
 <h6 class="heading-dark">Dufferin Grove Park</h6>
 <img class="image-bordered" src="photos/DufferinRink_tm.jpg" alt="">
 <h6 class="heading-dark">Skating</h6>
</div>
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.

HTML pattern: vertical imagebox stack
<div class="imagebox-right clear-right">
 <h6 class="heading-dark">Dufferin Grove Park</h6>
 <img class="image-bordered" src="photos/DufferinRink_tm.jpg" alt="">
 <h6 class="heading-dark">Skating</h6>
</div>

<div class="imagebox-right clear-right">
 <h6 class="heading-dark">Dufferin Grove Park</h6>
 <img class="image-bordered" src="photos/DufferinRink_tm.jpg" alt="">
 <h6 class="heading-dark">Skating</h6>
</div>

<div class="imagebox-right clear-right">
 <h6 class="heading-dark">Dufferin Grove Park</h6>
 <img class="image-bordered" src="photos/DufferinRink_tm.jpg" alt="">
 <h6 class="heading-dark">Skating</h6>
</div>
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...

HTML pattern: spanning imagebox-block-center
<div class="imagebox-block-center">
 <h6 class="heading-dark">Here is a picture of skating at the park</h6>
 <p class="compact"><img class="image-bordered" src="photos/DufferinRink_tm.jpg" alt=""></p>
 <h6 class="heading-dark">This appears underneath</h6>
 <p class="compact">Here is the imagebox spanning the page, centered...</p>
</div>

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).

HTML pattern: centered imagebox-block-center
<div class="text-align-center">
 <div class="imagebox-block-center" style="width:176px">
  <h6 class="heading-dark">Here is a picture of skating at the park</h6>
  <p class="compact"><img class="image-bordered" src="photos/DufferinRink_tm.jpg" alt=""></p>
  <h6 class="heading-dark">This appears underneath</h6>
  <p class="compact">Here is the imagebox centered on the page...</p>
 </div>
</div>
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.

HTML pattern: imagebox cluster
<div class="text-align-center"><!-- IE centering wrapper -->
 <div class="margin-vertical-auto" style="width:356px"><!-- size wrapper -->
  <div class="imagebox-block-center">
   <div class="block-divider"></div>
   <div class="imagebox-left">
    <h6 class="heading-dark">Dufferin Grove Park</h6>
    <img class="image-bordered" src="photos/DufferinRink_tm.jpg" alt="">
    <h6 class="heading-dark">Imagebox 1</h6>
   </div>
   <div class="imagebox-left margin-right-none">
    <h6 class="heading-dark">Dufferin Grove Park</h6>
    <img class="image-bordered" src="photos/DufferinRink_tm.jpg" alt="">
    <h6 class="heading-dark">Imagebox 2</h6>
   </div>
   <div class="block-divider"></div>
   <div class="imagebox-left margin-bottom-none">
    <h6 class="heading-dark">Dufferin Grove Park</h6>
    <img class="image-bordered" src="photos/DufferinRink_tm.jpg" alt="">
    <h6 class="heading-dark">Imagebox 3</h6>
   </div>
   <div class="imagebox-left margin-right-none margin-bottom-none">
    <h6 class="heading-dark">Dufferin Grove Park</h6>
    <img class="image-bordered" src="photos/DufferinRink_tm.jpg" alt="">
    <h6 class="heading-dark">Imagebox 4</h6>
   </div>
   <div class="block-divider"></div>
   <h6 class="heading-dark">Outer Imagebox</h6>
  </div><!-- outer imagebox -->
 </div><!-- size wrapper -->
</div><!-- IE centering wrapper -->

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).

Crossbars

Crossbars are spanning block level elements that differentiate their contents from the contents above and below. They can contain any block-level element. As with section-divider modifiers for headings (see Basic block level elements) the terms "high", "mid" and "low" refer to the order of importance of the contents rather than physical positioning.

This is a "high" crossbar.

This is a "mid" crossbar.

This is a "low" crossbar.

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.

HTML pattern: bicolumns
<div class="block-divider"></div>
<div class="division-compact">

<div class="bicolumn-left">
 <h3 class="section-divider-high">Left column heading</h3>
 <p>This is the left bicolumn.</p>
</div><!-- bicolumn-left -->

<div class="bicolumn-right">
 <h3 class="section-divider-high">Right column heading</h3>
 <p>This is the right bicolumn.</p>
</div><!-- bicolumn-right -->

<div class="block-divider"></div>
</div><!-- division-compact -->