Nashua River Watershed Association

This is an article showing how the various positioning styles work.

The names that are in the "Styles" dropdown box in the editor are actually aliases for the styles as they appear in the HTML code. For example, the "Image: align left" style is the alias for "floatImageLeft" in the HTML code.

The ordering in the HTML in all the examples is:

The red paragraph
The square(s)
The green paragraph

IMPORTANT NOTE: The positioning from these styles is really only seen in full-width displays. For small/mobile displays, there are other positioning styles that will automatically override these so that there is no wrapping of text around images.

EXAMPLE 1 - No styles applied

There are no styles applied here.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse rutrum egestas feugiat. Mauris suscipit quam sit amet hendrerit convallis. Suspendisse pretium ligula ac nisi dictum consequat. Etiam ut purus dictum, accumsan purus et, auctor risus. Nunc sed odio non ipsum viverra maximus.

Image no style applied

Nullam cursus consectetur hendrerit. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed a feugiat erat. Nullam ultricies metus eu dui ornare auctor

EXAMPLE 2 - "Image: align left"

We've added the "Image: align left" style to the square.
It aligns ("floats") the square to the left.
It will allow text to wrap around to the square's right side.

Image align left

Nullam cursus consectetur hendrerit. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed a feugiat erat. Nullam ultricies metus eu dui ornare auctor

EXAMPLE 3a - "Image: align left" and "Text: clear left side"

This is the same as Example 2, but we've added the "Text: clear left side" style to the green paragraph.
This will not allow any content to appear to the left of the green paragraph (i.e., this "clears" any content from appearing to the left of the paragraph).

Image align left

"Text: clear left side": Nullam cursus consectetur hendrerit. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed a feugiat erat. Nullam ultricies metus eu dui ornare auctor

EXAMPLE 3b - "Image: align left" and "Text: clear left side"

(The red text is in paragraph #1. It has no styles applied to it) Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse rutrum egestas feugiat. Mauris suscipit quam sit amet hendrerit convallis. Suspendisse pretium ligula ac nisi dictum consequat. Etiam ut purus dictum, accumsan purus et, auctor risus. Nunc sed odio non ipsum viverra maximus.

Image align left

(The square is in paragraph #2, and has the "Image: align left" style applied to it)
(The green text is in paragraph #3, and has no styles applied to it) Cras ac metus mattis, imperdiet mauris in, imperdiet diam. Phasellus lacinia nisl nec ligula fermentum molestie. Sed vulputate, erat sed scelerisque pharetra

(The purple text is in paragraph #4, and has no styles applied to it) Curabitur gravida pulvinar eros, vel porttitor sapien pretium eleifend. Vivamus ultrices in magna at aliquet.

(The orange text is in paragraph #5, and has the "Text: clear left side" style applied to it) Praesent dapibus tellus nibh, nec tincidunt est porta nec. Praesent id arcu nec ante facilisis tempus.

EXAMPLE 4 - "Image: align right"

The square's style is now "Image: align right".
It aligns ("floats") the square to the right.
It will allow text to wrap around to the square's left side.
The red and green text have no styles applied.

Image align right

Nullam cursus consectetur hendrerit. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed a feugiat erat. Nullam ultricies metus eu dui ornare auctor

EXAMPLE 5 - "Image: align right" and "Text: clear right side"

This is the same as Example 4, but we've added the "Text: clear right side" style to the green paragraph.
This will not allow any content to appear to the right of the green paragraph (i.e., this "clears" any content from appearing to the right of the paragraph).

Image align right

"Text: clear right side": Nullam cursus consectetur hendrerit. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed a feugiat erat. Nullam ultricies metus eu dui ornare auctor

EXAMPLE 6 - "Image: center"

The square's style is now "Image: center".
There is no "float" property assigned to it.
The red and green text have no styles applied.

Image center

Nullam cursus consectetur hendrerit. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed a feugiat erat. Nullam ultricies metus eu dui ornare auctor

EXAMPLE 7 - "Image: align top"

The style for both squares is "Image: align top".
There is no "float" property assigned to them.
This style is usually used in photo gallery articles, where images are in a row and you want to align their top edges.
Both images are contained within one paragraph.
The red and green text have no styles applied.

Image align top Image align top small

Nullam cursus consectetur hendrerit. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed a feugiat erat. Nullam ultricies metus eu dui ornare auctor

STAY CONNECTED:

Nashua River Canoe & Kayak Guide

River Report Card

Prescription Drug Disposal

What is a Watershed?