Schools Website Service user guide

Floating Images

There are four standard types of image floating, left and right and left and right with borders.

In each case, instructions are in bold, with 'filler' text to show the floating and wrapping in full. Please note, the floating image style should only be applied to an image and not the accompanying text.

Normal floating

Image left

floated image

Insert the image into your text. Select the image and apply the style 'Float image left' that appears in the styles drop-down menu.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean orci sem, facilisis et, venenatis at, vestibulum vulputate, velit. Praesent placerat facilisis tellus. Phasellus elit. Ut euismod posuere elit. Cras dui. Mauris hendrerit. Quisque est. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nam blandit velit id metus. Quisque eleifend. In tincidunt mauris ut arcu. Aliquam erat volutpat. Ut sagittis. Proin luctus blandit sem. Aenean lacus. Aliquam nisi augue, accumsan quis, fermentum eu, nonummy a, lectus. Donec urna arcu, commodo sed, eleifend vitae, pharetra vel, turpis.

Curabitur ultricies. Integer eu arcu at tortor fermentum dapibus. Aenean in quam vel tellus sollicitudin rutrum. Vivamus a justo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Sed interdum bibendum felis. Cras ligula nibh, laoreet vitae, tempor ut, iaculis eget, erat. Vestibulum vel urna. Vestibulum a pede. Praesent magna nisi, convallis vitae, mattis et, suscipit vel, lacus. Maecenas ullamcorper. In vel tortor. In hac habitasse platea dictumst. Ut arcu.

Image right

floated image

Insert the image into your text. Select the image and apply the style 'Float image right' that appears in the styles drop-down menu.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean orci sem, facilisis et, venenatis at, vestibulum vulputate, velit. Praesent placerat facilisis tellus. Phasellus elit. Ut euismod posuere elit. Cras dui. Mauris hendrerit. Quisque est. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nam blandit velit id metus. Quisque eleifend. In tincidunt mauris ut arcu. Aliquam erat volutpat. Ut sagittis. Proin luctus blandit sem. Aenean lacus. Aliquam nisi augue, accumsan quis, fermentum eu, nonummy a, lectus. Donec urna arcu, commodo sed, eleifend vitae, pharetra vel, turpis.

Curabitur ultricies. Integer eu arcu at tortor fermentum dapibus. Aenean in quam vel tellus sollicitudin rutrum. Vivamus a justo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Sed interdum bibendum felis. Cras ligula nibh, laoreet vitae, tempor ut, iaculis eget, erat. Vestibulum vel urna. Vestibulum a pede. Praesent magna nisi, convallis vitae, mattis et, suscipit vel, lacus. Maecenas ullamcorper. In vel tortor. In hac habitasse platea dictumst. Ut arcu.

With boxes

Please note, applying these styles will give this effect wherever the image is used, as the styling is set on the image, rather than in the text. If you want to apply a border to an image on one page without affecting how the image looks in other pages, you can use a style called 'bordered image'. (Note that this style will not make the image float in any way and so text will not wrap nicely around it.)

Image left

floated image

Insert the image into your text. Select the image and apply the style 'Float image left box':

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean orci sem, facilisis et, venenatis at, vestibulum vulputate, velit. Praesent placerat facilisis tellus. Phasellus elit. Ut euismod posuere elit. Cras dui. Mauris hendrerit. Quisque est. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nam blandit velit id metus. Quisque eleifend. In tincidunt mauris ut arcu. Aliquam erat volutpat. Ut sagittis. Proin luctus blandit sem. Aenean lacus. Aliquam nisi augue, accumsan quis, fermentum eu, nonummy a, lectus. Donec urna arcu, commodo sed, eleifend vitae, pharetra vel, turpis.

Curabitur ultricies. Integer eu arcu at tortor fermentum dapibus. Aenean in quam vel tellus sollicitudin rutrum. Vivamus a justo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Sed interdum bibendum felis. Cras ligula nibh, laoreet vitae, tempor ut, iaculis eget, erat. Vestibulum vel urna. Vestibulum a pede. Praesent magna nisi, convallis vitae, mattis et, suscipit vel, lacus. Maecenas ullamcorper. In vel tortor. In hac habitasse platea dictumst. Ut arcu.

Image right

floated image

Insert the image into your text. Select the image and apply the style 'Float image right box':

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean orci sem, facilisis et, venenatis at, vestibulum vulputate, velit. Praesent placerat facilisis tellus. Phasellus elit. Ut euismod posuere elit. Cras dui. Mauris hendrerit. Quisque est. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nam blandit velit id metus. Quisque eleifend. In tincidunt mauris ut arcu. Aliquam erat volutpat. Ut sagittis. Proin luctus blandit sem. Aenean lacus. Aliquam nisi augue, accumsan quis, fermentum eu, nonummy a, lectus. Donec urna arcu, commodo sed, eleifend vitae, pharetra vel, turpis.

Curabitur ultricies. Integer eu arcu at tortor fermentum dapibus. Aenean in quam vel tellus sollicitudin rutrum. Vivamus a justo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Sed interdum bibendum felis. Cras ligula nibh, laoreet vitae, tempor ut, iaculis eget, erat. Vestibulum vel urna. Vestibulum a pede. Praesent magna nisi, convallis vitae, mattis et, suscipit vel, lacus. Maecenas ullamcorper. In vel tortor. In hac habitasse platea dictumst. Ut arcu.